three.js的描边、高亮效果

项目场景：

有时需要在点击、悬浮时高亮当前点击、悬浮的模型

---

解决方案：

提示：这里填写该问题的具体解决方案：

1. 引入描边、渲染器通道等

import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';

2. 自定义描边效果

// 描边
composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
//模型描边颜色，默认白色         
outlinePass.visibleEdgeColor.set(0xffff00);
//高亮发光描边厚度
outlinePass.edgeThickness = 4;
//高亮描边发光强度
outlinePass.edgeStrength = 6;
//模型闪烁频率控制，默认0不闪烁
outlinePass.pulsePeriod = 0;
composer.addPass(outlinePass);

3. 如果在点击时触发描边效果，需要配合点击事件使用

function onMouseDblclick(event) {
    //获取raycaster和所有模型相交的数组，其中的元素按照距离排序，越近的越靠前
    let intersects = getIntersects(event);


    //获取选中最近的Mesh对象
    if (intersects.length !== 0 && intersects[0].object instanceof THREE.Mesh) {
        const selectedObject = intersects[0].object;
        let selectedObjects = [];
        selectedObjects.push(selectedObject);
        // 将描边模型添加进去
        outlinePass.selectedObjects = selectedObjects
    }
}

4. 在循环渲染函数中composer.render()将替换renderer.render(scene, camera)

function render() {
  // renderer.render(scene, camera);
  composer.render()
  controls.update()
  requestAnimationFrame(render);
}

点击事件参考