如何水平翻转Three.js纹理

Question

我正在制作一个360度观看者，所以纹理在圆柱体内。问题是它们看起来是水平倒置的。

我知道texture.flipY但我在the source上找不到texture.flipX。

那么如何直接在代码中水平或沿x轴翻转纹理？ （不使用图像编辑器）

Answer 1

要水平翻转纹理，您可以执行以下操作：

texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = - 1;

正如评论中所提到的，这种方法要求纹理的大小为2的幂。

three.js r.87

Answer 2

这似乎有点矫枉过正，但我​​认为一个不错的方法是将其围绕其中心旋转 180 度（PI 弧度），然后翻转它：

texture.center = new THREE.Vector2(0.5, 0.5);
texture.rotation = Math.PI;
texture.flipY = false;

Answer 3

这里的另一种方法是更改​​几何形状。在圆柱几何中，为要渲染的圆柱部分指定thetaStart和thetaLength，通常选择一个正角，即thetaLength>0。相反，如果将thetaStart + thetaLength和-thetaLength传递给CylinderBufferGeometry，则圆柱体将顺时针而不是逆时针渲染，并且所有面法线现在都指向内。因此，不再需要翻转纹理。