x ,y 1保持不变
这里y为-1 代表垂直翻转
反之则反
ctx.scale(1,-1)
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);
网友评论