美文网首页
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);

相关文章

  • OpenGL 图片翻转的5种策略

    iOS纹理翻转解决策略 第1种: 旋转矩阵翻转图形,不翻转纹理 让图形顶点坐标旋转180°. 而纹理保持原状. 第...

  • OpenGL ES(五)-纹理翻转解决策略

    一、旋转矩阵翻转图形,不翻转纹理 让图形顶点坐标旋转180°. 而纹理保持原状. 二、解压图片时,将图片源文件翻转...

  • 23three.js加载纹理凹凸贴图和canvas画布

  • GLSL纹理翻转解决策略

    第1种: 旋转矩阵翻转图形,不翻转纹理 让图形顶点坐标旋转180°. 而纹理保持原状. 第2种: 解压图片时,将图...

  • 05-探索纹理翻转的解决策略

    第1种:旋转矩阵翻转图形,不翻转纹理 让图形顶点坐标旋转180°. 而纹理保持原状. 在顶点着色器程序shader...

  • OpenGLES 2 (翻)

    OpenGLES 2 翻转策略 方案一:图形顶点翻转180°,纹理保持原状 图形顶点利用旋转矩阵旋转180°,如图...

  • OpenGL 纹理翻转策略

    旋转矩阵翻转图形 解压图片时,将图片源文件翻转 修改片元着色器纹理坐标 修改顶点着色器,纹理坐标 直接从源纹理坐标...

  • OpenGL ES 3.0-纹理翻转策略

    有5种策略 旋转矩阵翻转图形,不翻转纹理 在解压图片时,将图片源文件翻转 修改片元着色器,纹理坐标 修改顶点着色器...

  • three.js(11)-纹理贴图

    其实纹理材质跟css的background基本一致,除了简单的颜色背景,还可以贴图。 这里涉及到异步加载图片,为了...

  • 优动漫 PAINT 导航窗口面板

    导航窗口面板用于管理画布的视图。本节将介绍如何在其中缩放、旋转、翻转画布。 软件下载:http://www.don...

网友评论

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

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