如何水平翻转 Three.js 纹理

Question

我正在制作 360 查看器，因此纹理位于圆柱体内。 问题是它们水平倒置。

我知道texture.flipY但我没有在 source上找到texture.flipX 。

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

Answer 1

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

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

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

三.js r.87

Answer 2

答案比我想象的要容易。

cylinder.scale.x = -1;

并且不要忘记添加

material.side = THREE.DoubleSide;

Answer 3

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

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

Answer 4

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