如何在Three.js中水平翻转纹理

Question

我正在制作一个360度浏览器，所以纹理位于圆柱体内。问题在于它们水平颠倒。

我知道 texture.flipY，但是在源代码中没有找到texture.flipX。

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

- Pier

Answer 1

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

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

three.js r.147

- WestLangley

---

我做了这件事，但是没有翻转纹理，而是整个对象上扩展了1像素的纹理。 - Pier

我尝试使用来自相机的动态纹理，并渲染到场景内的平面上，效果很好。plane1.material.map.wrapS = THREE.RepeatWrapping; plane1.material.map.repeat.x = -1; - steveOw

这可以工作，但它也需要二的次幂纹理大小。 - leviathanbadger

与 @Pier 相同的问题，图像的 1 像素被拉伸到整个脸上。该图像的大小为 512 x 1024。 - Ben Davis

对于大小不是2的幂次方的贴图，在iOS Safari上使用RepeatWrapping会失败。 - Summer Sun

Answer 2

答案比我想象的要简单。

cylinder.scale.x = -1;

别忘了添加

material.side = THREE.DoubleSide;

- Pier

---

你的问题涉及到纹理而不是对象。 - gaitat

对于纯纹理（即图像），请使用类似 filter.js 的库（附言：我是作者）。 - Nikos M.

考虑到没有texture.flipX，这似乎是唯一可行的方法。我发现我还需要旋转贴图所映射的对象：object.rotation.y = Math.PI; - robshearing

我认为更实用的方法是通过几何UV坐标并反转它们。 - leviathanbadger

@DiarmidMackenzie 谢谢。我删除了我的评论以防混淆。 - WestLangley

Answer 3

这可能看起来有些过度，但我认为一个不错的方法是将它围绕中心旋转180度（PI弧度），然后翻转它：

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

- Hunor Márton Borbély

Answer 4

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

- Elmar Zander