模型点击高亮效果

let color = 0xff0000;
let prevObject;
export function clearhighlightColor() {
  if (prevObject?.originalMaterial) {
    prevObject.material = prevObject.originalMaterial;
    prevObject.clickToHighlight = false;
    delete prevObject.originalMaterial;
  }

  prevObject = '';
}

export function clickhighlightColor(clickObj) {
  clickObj.clickToHighlight = true; // clickToHighlight为true时 报警闪烁不执行
  if (clickObj.material instanceof Array) {
    clickObj.originalMaterial = clickObj.material; // 保存原始材质
    clickObj.material = clickObj.material.map((child) => child.clone()); // 防止修改到所有依赖这个material的模型
    clickObj.material.forEach((child) => {
      child.transparent = false; // 报警时点击模型 取消模型闪烁对点击模型的影响
      child.color.set(color);
    });
  } else {
    clickObj.originalMaterial = clickObj.material; // 保存原始材质
    clickObj.material = clickObj.material.clone(); // 防止修改到所有依赖这个material的模型
    clickObj.material.transparent = false; // 报警时点击模型 取消模型闪烁对点击模型的影响
    clickObj.material.color.set(color);
  }
  prevObject = clickObj;
}
      
// 在场景中添加点击事件 通过射线取到模型并对模型进行点击高亮的操作
document.addEventListener('click', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
  // event 点击事件的参数 (防止二维页面事件穿透)
  if (event.target.id !== 'north') {
    return;
  }

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  // TODO: concat 生成新数组 可能引起内存泄漏
  const intersects = raycaster.intersectObjects(intersectsObjs.concat([window.tipObj]), true);
  clearhighlightColor();
  if (intersects.length > 0) {
    // 可以在这个地方对需要点击高亮的模型做限制
    clickhighlightColor(intersects[0].object);
  } else {
  }
  window.renderer.render(window.scene, camera);
}
模型点击高亮效果 ​

模型点击高亮效果
