使用画布渲染器绕 y 轴旋转长方体而不导致图像失真 ( Three.js )

我花了几个小时试图解决这个问题...当渲染非常简单的形状（即复杂性非常低的立方体）并使用 Three.js 的纹理贴图功能时，当您旋转立方体时，图像似乎旋转时会变形，然后您可以看到一条穿过立方体表面的线，该线看起来像变形。

http://screencast.com/t/VpSPRsr1Jkss http://screencast.com/t/VpSPRsr1Jkss

我知道这是画布渲染的限制 - 但这似乎是一件非常简单的事情 - 旋转一个面上有图像的立方体而不失真。

我可以采取其他画布库或方法吗？我真的很期待使用 Three.js 来制作一些徽标和其他 elemnet 的动画 - 但我们不能在徽标或面向客户的登陆页面中出现像这样的扭曲。

感谢您的阅读，我愿意接受这里的建议。

我不接受增加面部复杂性作为解决方案，因为这只会将扭曲分布到整个面部。我真的只想将图像渲染到平坦的表面并能够旋转该对象。

您看到的扭曲是因为只有两个三角形构成了该平面。 一个快速的解决办法是拥有更详细的平面。

如果您使用 PlaneGeometry，请增加段数。 如果您使用的是 CubeGeometry，请增加所需平面上的线段数量（3 条中的 2 条）。

需要花一些功夫才能在良好的外观和最佳性能之间找到最佳平衡（因为更多的段将需要更多的计算）。希望对于简单的场景你不会有太大的延误。