如何水平翻轉 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 ，圓柱體將順時針渲染而不是逆時針渲染，並且所有面法線現在都指向內部。 因此，無需再翻轉紋理。