threejs 实现高亮发光描边效果

threejs会遇到一些需求，比如模型选中后，添加一个高亮描边的效果，表示当前模型选中了，那么如何实现描边呢？

这里我们可以使用OutlinePass来实现高亮发光描边效果

后期处理需要用到EffectComposer.js效果合成器，对threejs进行后期处理。

引入`EffectComposer.js`

import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer.js';

如果需要对一个webgl渲染器的渲染结果进行后期处理，就把它作为 EffectComposer 的参数。

// 创建后处理对象EffectComposer,WebGL渲染器作为参数
const composer = new EffectComposer(renderer)

引入渲染通道

import {RenderPass} from '../../../js/threejs/examples/jsm/postprocessing/RenderPass.js';

通进EffectComposer(renderer)指定了需要后处理的渲染器WebGLRenderer，渲染器通道 RenderPass 的作用是指定后处理对应的相机camera和场景scene.

给EffeetComposer 添加一个渲染器通道 RenderPass。

添加`OutlinePass`通道

OutlinePass 可以给指定的某个模型对象添加一个高亮发光描边效果。

import {OutlinePass} from '../../../js/threejs/examples/jsm/postprocessing/OutlinePass.js';

创建OutlinePass通道

// outlinePass 第一个参数v2的尺寸和canvas画布保持一致
const v2 = new THREE.Vector2(window.innerWidth, window.innerHeight)
const outlinePass = new OutlinePass(v2,scene,camera);

选择模型

OutlinePass属性.selectedObjects

three.js场景中有多个模型的话，希望给哪个模型对象设置发光描边效果，就可以通过OutlinePass的选择对象属性.selectedObjects设置。

// 一个模型
outlinePass.selectedObjects=[meshGroup];
// 多个模型对象
outlinePass.selectedObjects=[meshGroup,mesh];

渲染循环执行 `EffectComposer.render()`

渲染循环中后处理EffectComposer执行 render()
会调用webgl渲染器执行.render()也就是说 renderer.render(scene，camera) 不用再执行。

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

实现效果

当前内容为观看threejs视频教程 WebGL/Three.js前端高薪3D可视化课程-后期处理-高亮发光描边OutlinePass-学习笔记

引入EffectComposer.js