three.js无法实现高亮问题

通过设置模型的材质来实现高亮效果。在选中模型时，你可以将其材质更改为一个不同的颜色或者使用一个发光的材质。

将模型分解为更小的部分，然后对每个部分设置一个唯一的ID。这样，在使用射线进行交叉检测时，你可以获得每个部分的ID，从而实现高亮效果。

尝试使用更准确的射线进行交叉检测，例如使用较小的角度，以便更准确地选择模型。确保模型的几何体是正确的，并且没有一些隐藏的部分导致射线无法与它们相交。

下面是一些代码片段，可以帮助你实现高亮和拖拽效果：
下面展示一些 内联代码片。

// 添加选中模型时的高亮效果
function highlightObject(object) {
  object.material.color.set(0xff0000);
}

// 移除选中模型时的高亮效果
function unhighlightObject(object) {
  object.material.color.set(0xffffff);
}

// 添加鼠标事件
function addMouseListener() {
  document.addEventListener('mousemove', onMouseMove, false);
  document.addEventListener('mousedown', onMouseDown, false);
}

// 实现鼠标移动时的交叉检测和高亮效果
function onMouseMove(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);

  // 遍历每个相交的对象并高亮它们
  for (let i = 0; i < intersects.length; i++) {
    const object = intersects[i].object;
    highlightObject(object);
  }
}

// 实现鼠标按下时的拖拽效果
function onMouseDown(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);

  // 遍历每个相交的对象并拖拽它们
  for (let i = 0; i < intersects.length; i++) {
    const object = intersects[i].object;
    // 将选中的对象保存到