Three.js UV坐标纹理适配异常：如何在指定区域绘制文本？

嘿，我来帮你搞定这两个问题！先从你提到的UV映射纹理异常问题入手，再讲拖拽区域的文本绘制方法。

一、修复UV映射导致的纹理异常问题 #

你当前的UV算法是基于整个几何体的全局 bounding box，只用了x和y轴计算UV坐标，这会导致所有面被强行映射到xy平面范围内，自然出现类似Box Geometry的拉伸变形。要解决这个，我们需要针对每个面的朝向，动态选择合适的坐标轴生成UV，让纹理贴合每个面的自然朝向。

下面是修改后的assignUVs函数，它会根据每个面的法线方向，自动选择最优的两个轴来计算UV：

function assignUVs(object) {
  object.geometry.computeBoundingBox();
  const { max, min } = object.geometry.boundingBox;
  // 预先计算三个轴的范围
  const axisRanges = {
    x: max.x - min.x,
    y: max.y - min.y,
    z: max.z - min.z
  };

  object.geometry.faceVertexUvs[0] = object.geometry.faces.reduce((acc, face) => {
    // 确保面法线已归一化
    face.normal.normalize();
    
    // 根据法线分量大小，选择垂直于法线的两个轴做UV映射
    let uAxis, vAxis;
    if (Math.abs(face.normal.x) > Math.abs(face.normal.y) && Math.abs(face.normal.x) > Math.abs(face.normal.z)) {
      // 法线朝向x轴，用y-z平面做UV
      uAxis = 'y';
      vAxis = 'z';
    } else if (Math.abs(face.normal.y) > Math.abs(face.normal.z)) {
      // 法线朝向y轴，用x-z平面做UV
      uAxis = 'x';
      vAxis = 'z';
    } else {
      // 法线朝向z轴，用x-y平面做UV（和你原逻辑一致，但只用于朝向z的面）
      uAxis = 'x';
      vAxis = 'y';
    }

    const v1 = object.geometry.vertices[face.a];
    const v2 = object.geometry.vertices[face.b];
    const v3 = object.geometry.vertices[face.c];

    acc.push([
      new THREE.Vector2((v1[uAxis] - min[uAxis]) / axisRanges[uAxis], (v1[vAxis] - min[vAxis]) / axisRanges[vAxis]),
      new THREE.Vector2((v2[uAxis] - min[uAxis]) / axisRanges[uAxis], (v2[vAxis] - min[vAxis]) / axisRanges[vAxis]),
      new THREE.Vector2((v3[uAxis] - min[uAxis]) / axisRanges[uAxis], (v3[vAxis] - min[vAxis]) / axisRanges[vAxis])
    ]);
    return acc;
  }, []);

  object.geometry.uvsNeedUpdate = true;
  object.geometry.elementsNeedUpdate = true;
}

改动说明 #

• 每个面会根据自身法线方向，选择垂直于法线的两个轴生成UV，纹理会贴合面的朝向，避免全局拉伸。
• 保留了你原有的 bounding box 范围计算逻辑，但针对不同面做了轴的动态切换，适配性更强。

二、在拖拽区域绘制文本的方法 #

要在Canvas的拖拽区域绘制文本，需要结合Three.js的Canvas元素和2D绘图上下文，同时监听拖拽事件确定绘制位置，步骤如下：

1. 获取2D绘图上下文 #

先拿到Three.js使用的Canvas元素，创建对应的2D上下文：

const canvas = renderer.domElement;
const ctx = canvas.getContext('2d');

2. 监听拖拽事件并绘制文本 #

需要监听dragover（阻止默认行为让drop事件触发）和drop事件，在drop时获取位置并绘制文本：

// 阻止默认拖拽行为，确保drop事件能触发
canvas.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// 处理drop事件，在拖拽位置绘制文本
canvas.addEventListener('drop', (e) => {
  e.preventDefault();
  
  // 将鼠标客户端坐标转换为Canvas本地坐标（适配Canvas的页面偏移/缩放）
  const canvasRect = canvas.getBoundingClientRect();
  const drawX = e.clientX - canvasRect.left;
  const drawY = e.clientY - canvasRect.top;

  // 配置文本样式
  ctx.font = '24px Arial';
  ctx.fillStyle = '#ff0000';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // 绘制自定义文本（这里用拖拽文件名做示例，可替换成你需要的内容）
  const displayText = e.dataTransfer.files.length > 0 ? e.dataTransfer.files[0].name : '拖拽成功！';
  ctx.fillText(displayText, drawX, drawY);

  // 注意：如果Three.js是持续渲染的，直接绘制的文本会被下一帧覆盖。可以把文本绘制到离屏Canvas作为纹理贴到3D物体上，或者在渲染循环末尾重绘文本
});

关键提示 #

• 如果你的Three.js场景是实时渲染的，直接用2D上下文绘制的文本会被后续渲染帧覆盖。这种情况可以把文本绘制到离屏Canvas，再将其作为纹理贴到3D平面上；或者把文本绘制逻辑放到渲染循环的最后执行。
• 坐标转换是核心，getBoundingClientRect()能帮你获取Canvas在页面的位置，从而把鼠标的客户端坐标转换成Canvas的本地坐标，确保文本绘制在正确的位置。

内容的提问来源于stack exchange，提问作者cetinDev