ThreeJS 轉紋理

Question

我用畫布創建了紋理，但我沒有什么問題。 我無法像圖像中那樣轉動我的紋理。 我該怎么做？

   setTexture = (name, font = 20) => {    

      const canvas = window.document.createElement("canvas");
      canvas.width = 256;
      canvas.height = 128;
      const ctx = canvas.getContext("2d");

      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.font = `${font}pt Arial`;
      ctx.fillStyle = "black";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText(
          name || "unnamed",
          canvas.width / 2,
          canvas.height / 2
      );

      const texture = new THREE.Texture(canvas);
      texture.wrapS = THREE.RepeatWrapping;
      texture.repeat.x = -1;
      texture.needsUpdate = true;
      return texture;
  };

Answer 1

如果要旋轉紋理，可以更新幾何體中的 UV，也可以使用texture.rotation修改器。

const texture = new THREE.Texture(canvas);
texture.rotation = Math.PI; // 180 deg in radians

如果旋轉不是圍繞您想要的點旋轉，您可以將texture.center設置為[0.0, 1.0]范圍內的另一個值。

const texture = new THREE.Texture(canvas);
texture.center = new THREE.Vector2(0.5, 0.7);
texture.rotation = Math.PI;