html - 使用 Canvas 渲染器 (three.js) 围绕 y 轴旋转矩形实体而不会出现图像失真

Question

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

http://screencast.com/t/VpSPRsr1Jkss

我知道这是 Canvas 渲染的局限性 - 但看起来这是一件非常简单的事情 - 旋转一个在一个面上有图像的立方体而不会失真。

我可以采用其他 Canvas 库或方法吗？我真的很期待使用 Three.js 为一些 Logo 和其他 elemnet 制作动画 - 但我们不能在 Logo 或面向客户的登录页面中出现这样的失真。

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

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

Answer 1

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

如果您使用的是 PlaneGeometry，请增加分段数。如果您使用的是 CubeGeometry，请增加所需平面上的段数(3 个中的 2 个)。

要在体面的外观和最佳性能之间找到最佳平衡点需要一些技巧(因为更多的片段需要更多的计算)。希望对于简单的场景，您不会有重大延误。