简书链接:three纹理画布贴图翻转和旋转
文章字数：200,阅读全文大约需要1分钟

x ,y 1保持不变
这里y为-1 代表垂直翻转
反之则反

ctx.scale(1,-1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

function createLabelForMesh(mesh, labelText) {
  let myvalue = 0
  if (mesh.xx||mesh.xx==0) {
    myvalue =  mesh.xx+ 15
  }
  mesh.xx = myvalue
  console.log("叠加",myvalue, mesh.xx )
  const canvas = document.createElement('canvas');
  // canvas.style.transform = 'scale(-1, -1)';
//移动
  canvas.getContext('2d').translate(-canvas.width / 2, -canvas.height / 2);

  // 旋转画布

  // canvas.getContext('2d').rotate(myvalue); // 180度旋转


  const ctx = canvas.getContext('2d');
  const texture = new THREE.CanvasTexture(canvas);
  // 设置 Canvas 尺寸
  canvas.width = 256;
  canvas.height = 128;
  // 设置字体和样式
  ctx.font = '24px Arial';
  ctx.fillStyle = '#ffffff'; // 更白的颜色
  // 清空 Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  labelText += "fffffffffff"
  // 计算文本宽度以便居中
  const textWidth = ctx.measureText(labelText).width;
  const x = (canvas.width - textWidth) / 2;
  const y = canvas.height / 2;
  // 绘制文本到 Canvas高
  ctx.fillText(labelText, x, y);
//  ctx.scale(1,-1)
  // 创建材质
  texture.center.set(0.5, 0.5);
  texture.needsUpdate = true;

  texture.rotation =myvalue; // 旋转180度（不是翻转）

  // 应用材质到传入的 Mesh
  mesh.material = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide});


  // 计算 Mesh 的位置调整，使其在中心
  // mesh.geometry.computeBoundingBox();
  // const meshWidth = mesh.geometry.boundingBox.max.x - mesh.geometry.boundingBox.min.x;
  // mesh.position.x -= meshWidth / 2;
  return mesh;
}

另外或许这些也可以实现翻转
canvas.style.transform = 'scale(-1, -1)';
以及texture.repeat.set(1, -1);