美文网首页
three纹理画布贴图翻转和旋转

three纹理画布贴图翻转和旋转

作者: 吉凶以情迁 | 来源:发表于2023-11-01 16:03 被阅读0次

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

    相关文章

      网友评论

          本文标题:three纹理画布贴图翻转和旋转

          本文链接:https://www.haomeiwen.com/subject/yfhgidtx.html