Three.js 快速入门教程 10 - 场景物体添加高亮效果

Three.js 提供了效果合成器，可以帮助我们实现多种后期效果，例如描边、发光、抗锯齿等等。本篇章以给场景物体添加高亮效果为例，讲解如何使用后期效果功能。

前置准备

效果合成器

引入效果合成器

// 引入效果合成器
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
// 如果使用npm，可能需要使用下面方法引入
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";

创建效果合成器对象

// 传入WebGL渲染器对象
const effectComposer = new EffectComposer(renderer);

渲染通道

引入渲染通道

// 引入渲染通道
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
// 如果使用npm，可能需要使用下面方法引入
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";

创建效果合成器对象

// 传入场景和相机
const renderPass = new RenderPass(scene, camera);

描边通道

引入描边通道

// 引入描边通道
import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
// 如果使用npm，可能需要使用下面方法引入
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass";

创建描边效果对象

// width height与画布的宽高相同
const outlinePass = new OutlinePass(new THREE.Vector2(width, height), scene, camera);

最后将渲染器通道和描边效果添加进效果合成器，至此便可在项目中使用描边效果了

effectComposer.addPass(renderPass);
effectComposer.addPass(outlinePass);

添加效果

在创建描边通道对象后，可以调整描边的样式

// 描边颜色
outlinePass.visibleEdgeColor.set(0xff0000);
// 描边宽度
outlinePass.edgeThickness = 2;
// 描边亮度
outlinePass.edgeStrength = 4;
// 描边闪烁频率控制，默认0不闪烁
outlinePass.pulsePeriod = 2;

然后给需要描边的模型对象添加效果

outlinePass.selectedObjects = [mesh1, mesh2];

selectedObjects 是一个数组，可以同时传入多个模型对象同时添加高亮效果

渲染循环

和之前讲过的各种渲染器以及动画过渡效果一样，效果合成器也需要被添加进渲染循环中

但需要注意的是，在效果合成器的渲染过程中，会调用内部的 WebGL 渲染器，因此需要先移除渲染循环中的 WebGL 渲染器

function render() {
  requestAnimationFrame(render);

  // 下行的代码不需要了
  // renderer.render(scene, camera)

  // 调用效果合成器的render
  effectComposer.render();
}

完整代码如下

// 引入效果合成器
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
// 如果使用npm，可能需要使用下面方法引入
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
// 引入渲染通道
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
// 如果使用npm，可能需要使用下面方法引入
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
// 引入描边通道
import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
// 如果使用npm，可能需要使用下面方法引入
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass";

// 完成场景 相机 渲染器准备工作
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建模型
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.set(1, 0, 3);

// 传入WebGL渲染器对象
const effectComposer = new EffectComposer(renderer);
// 传入场景和相机
const renderPass = new RenderPass(scene, camera);
// width height与画布的宽高相同
const outlinePass = new OutlinePass(new THREE.Vector2(width, height), scene, camera);

// 将渲染器通道和描边效果添加进效果合成器
effectComposer.addPass(renderPass);
effectComposer.addPass(outlinePass);

// 描边颜色
outlinePass.visibleEdgeColor.set(0xff0000);
// 描边宽度
outlinePass.edgeThickness = 2;
// 描边亮度
outlinePass.edgeStrength = 4;
// 描边闪烁频率控制，默认0不闪烁
outlinePass.pulsePeriod = 2;

// 传入模型对象添加高亮效果
outlinePass.selectedObjects = [mesh];

function render() {
  requestAnimationFrame(render);

  // 下行的代码不需要了
  // renderer.render(scene, camera)

  // 调用效果合成器的render
  effectComposer.render();
}

render();