给three.js导入的模型后添加点击事件,并在canvas中提示点击对象名称

要在canvas中提示点击对象名称，你需要在Three.js中添加一个HTML元素，用于显示提示信息。下面是一个基本的示例代码：

1. 添加HTML元素

<div id="info" style="position: absolute; top: 10px; left: 10px; color: #fff;"></div>

在这个例子中，我们添加了一个ID为“info”的DIV元素，用于显示提示信息。

2. 添加点击事件监听器

document.addEventListener('click', onDocumentClick, false);

3. 在监听器函数中实现射线检测，并显示提示信息

function onDocumentClick(event) {
  event.preventDefault();
  // 计算鼠标点击位置和屏幕尺寸的比例
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // 创建一个射线投射器
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  // 检测射线是否与模型相交
  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
    // 如果有相交的对象，则执行点击事件
    const obj = intersects[0].object;
    // 在这里添加你的点击事件处理逻辑
    document.getElementById("info").innerHTML = "Clicked on " + obj.name;
  } else {
    // 没有相交的对象则清空提示信息
    document.getElementById("info").innerHTML = "";
  }
}

在这个例子中，我们在点击事件处理函数中，首先计算了鼠标点击位置和屏幕尺寸的比例。然后，我们创建了一个射线投射器，并将其设置为从相机位置发射射线。最后，我们使用射线与场景中的所有对象进行相交检测，并在相交的对象数组中查找我们感兴趣的对象。如果找到了对象，则在HTML元素中显示提示信息。如果没有找到对象，则清空提示信息。

你需要将上面的示例代码中的 `camera` 和 `scene` 替换为你自己的 Three.js 相机和场景对象。另外，你还需要将 `obj` 对象替换为你要添加点击事件的模型对象，并设置该对象的 `name` 属性，用于在提示信息中显示该对象的名称。