Javascript 旋转纹理

Javascript 旋转纹理,javascript,reactjs,three.js,Javascript,Reactjs,Three.js,我用画布创建了纹理,但我没有什么问题。我无法像图像中那样改变我的纹理。我怎么做这个 setTexture = (name, font = 20) => { const canvas = window.document.createElement("canvas"); canvas.width = 256; canvas.height = 128; const ctx = canvas.getContext("2d");

我用画布创建了纹理,但我没有什么问题。我无法像图像中那样改变我的纹理。我怎么做这个

   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;
  };

如果要旋转纹理,可以更新几何体中的UV,也可以使用修改器

const texture = new THREE.Texture(canvas);
texture.rotation = Math.PI; // 180 deg in radians
如果旋转不是围绕您想要的点旋转,则可以设置为
[0.0,1.0]
范围内的另一个值

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

您可能还希望在图像编辑器中旋转图像,保存并reload@Hesha他的代码中的图像是通过canvas元素动态生成的。这里没有涉及图像编辑器。自我提示:午夜过后我应该停止使用SO