如何水平翻转 Three.js 纹理

Question

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

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

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

Answer 1

答案比我想象的要简单。

cylinder.scale.x = -1;

别忘了添加

material.side = THREE.DoubleSide;

Answer 2

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

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

如评论中所述，此方法要求纹理大小为二次方。

three.js r.87

Answer 3

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

Answer 4

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

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

如何水平翻转 Three.js 纹理

How to flip a Three.js texture horizontally

javascript

three.js