点击通过new THREE.FontLoader生成的3D文本触发指定函数的实现方法

Three.js没有原生DOM点击事件绑定到3D物体上，需要通过THREE.Raycaster射线投射能力检测鼠标点击位置和3D物体的交集实现交互，你之前操作失败大概率是两个原因：一是text1是字体加载回调内的局部变量，外部检测逻辑无法访问；二是直接给Mesh加DOM事件是无效的，3D物体不存在于DOM树中。 #

步骤1：提前定义公共变量 #

在全局作用域或模块顶层声明必要变量：

// 存储所有可点击3D对象
const clickableMeshes = [];
// 射线投射实例
const raycaster = new THREE.Raycaster();
// 存储标准化鼠标坐标
const mouse = new THREE.Vector2();
// 替换为你要触发的自定义函数
function onTextClick() {
  console.log('3D文本被点击触发');
}

步骤2：将文本Mesh加入可点击列表 #

修改你原有的字体加载逻辑，把生成的文本Mesh加入检测列表：

const loader1 = new THREE.FontLoader();
loader1.load(
  './fonts/helvetiker_regular.typeface.json',
  (font) => {
    const textGeometry1 = new THREE.TextBufferGeometry(
      "A",
      {
        font: font,
        size: 0.6,
        height: 0.1,
        curveSegments: 20,
        bevelEnabled: true,
        bevelThickness: 0.015,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 50
      }
    )
    // 提前计算包围盒，提升射线检测精度
    textGeometry1.computeBoundingBox();
    const textMaterial1 = new THREE.MeshBasicMaterial({ color: 'black' })
    const text1 = new THREE.Mesh(textGeometry1, textMaterial1)
    text1.position.set(15.2, 0.2, 6.7)
    text1.rotation.set(0, 0.8, 0)
    scene.add(text1);
    // 加入可点击列表
    clickableMeshes.push(text1);
  }
);

步骤3：实现点击检测逻辑 #

添加鼠标点击监听，执行射线检测逻辑：

window.addEventListener('click', (event) => {
  // 将鼠标坐标转换为Three.js标准化设备坐标，范围[-1, 1]
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 基于相机和鼠标位置更新射线，注意这里的camera要替换为你场景中实际使用的相机实例
  raycaster.setFromCamera(mouse, camera);

  // 检测射线和可点击物体的交集
  const intersects = raycaster.intersectObjects(clickableMeshes);

  // 有交集说明点击到了目标文本
  if(intersects.length > 0) {
    onTextClick();
  }
}, false)

常见问题排查 #

• 点击无响应优先确认相机变量名正确，不要引用错相机实例
• 点击偏移过大可以适当调高几何体的curveSegments参数，或者开启包围盒检测模式
• 使用OrbitControls等交互控制器时，可以把事件绑定到渲染Canvas而非Window，避免事件冲突

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