如何水平翻转 Three.js 纹理答案

【问题标题】：How to flip a Three.js texture horizontally如何水平翻转 Three.js 纹理
【发布时间】：2015-07-10 13:25:56
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

如 cmets 中所述，这种方法要求纹理的大小是 2 的幂次方。

three.js r.87

【讨论】：

我这样做了，但不是翻转纹理，而是在整个对象上扩展了 1px 的纹理。
我尝试使用来自相机的动态纹理并渲染到场景内平面，效果很好。 plane1.material.map.wrapS = THREE.RepeatWrapping; plane1.material.map.repeat.x = -1;
这行得通，但它也需要二次幂的纹理大小。
与@Pier 相同的问题，1px 的图像在面部被拉伸。图片为 512 x 1024。
对于大小不是 2 次方的纹理，RepeatWrapping 在 iOS safari 上会失败

【解决方案2】：

答案比我想象的要容易。

cylinder.scale.x = -1;

别忘了添加

material.side = THREE.DoubleSide;

【讨论】：

你的问题是关于纹理而不是物体。
对于纯纹理（即图像），请使用 filter.js 之类的库（ps 我是作者）
感谢@NikosM 的建议。
three.js 不支持负比例因子，它可能会导致不良后果，例如反向缠绕顺序和不正确的法线。我不会推荐这个答案中建议的方法——即使你可能已经看到它在其他地方使用过。
鉴于没有 texture.flipX，这似乎是唯一实用的方法。我发现我还需要旋转纹理映射到的对象：object.rotation.y = Math.PI;

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：