第五部分-后期特效与着色器——25. 内置特效

25. 内置特效

1. 概述

Three.js 提供了多种内置后期特效，包括泛光（Bloom）、景深（Depth of Field）、轮廓描边（Outline）、颜色校正等。这些特效可以组合使用，创造出丰富的视觉效果。

┌─────────────────────────────────────────────────────────────┐ │ 内置特效类型 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 泛光效果 (UnrealBloomPass) │ │ ├── 模拟高光溢出 │ │ ├── 增强亮部区域 │ │ └── 参数：强度、半径、阈值 │ │ │ │ 景深效果 (BokehPass) │ │ ├── 模拟相机焦距 │ │ ├── 背景模糊 │ │ └── 参数：焦距、光圈、焦点距离 │ │ │ │ 轮廓描边 (OutlinePass) │ │ ├── 物体边缘高亮 │ │ ├── 选择特定物体 │ │ └── 参数：边缘颜色、强度 │ │ │ │ 颜色校正 (Afterimage) │ │ ├── 残影效果 │ │ ├── 运动模糊 │ │ └── 参数：衰减、阻尼 │ │ │ └─────────────────────────────────────────────────────────────┘

2. 泛光效果（UnrealBloomPass）

泛光效果模拟高亮区域的发光效果，常用于科幻、梦幻风格。

2.1 安装和导入

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

2.2 创建泛光特效

// 创建合成器constcomposer=newEffectComposer(renderer);// 渲染通道constrenderPass=newRenderPass(scene,camera);composer.addPass(renderPass);// 泛光通道constbloomPass=newUnrealBloomPass(newTHREE.Vector2(window.innerWidth,window.innerHeight),1.5,0.4,0.85);bloomPass.threshold=0.1;// 亮度阈值（高于此值的像素会发光）bloomPass.strength=1.2;// 发光强度bloomPass.radius=0.5;// 发光半径composer.addPass(bloomPass);

2.3 参数详解

3. 景深效果（BokehPass）

景深效果模拟相机镜头对焦，使背景或前景模糊。

3.1 创建景深特效

import{BokehPass}from'three/examples/jsm/postprocessing/BokehPass.js';// 需要深度材质constdepthMaterial=newTHREE.MeshDepthMaterial();constbokehPass=newBokehPass(scene,camera,{focus:1.0,// 焦点距离aperture:0.025,// 光圈大小maxblur:0.01,// 最大模糊量width:window.innerWidth,height:window.innerHeight});composer.addPass(bokehPass);

3.2 参数详解

4. 轮廓描边（OutlinePass）

轮廓描边用于高亮显示选中的物体。

4.1 创建轮廓描边

import{OutlinePass}from'three/examples/jsm/postprocessing/OutlinePass.js';constoutlinePass=newOutlinePass(newTHREE.Vector2(window.innerWidth,window.innerHeight),scene,camera);outlinePass.edgeStrength=3.0;// 边缘强度outlinePass.edgeGlow=0.5;// 边缘发光outlinePass.edgeThickness=1.0;// 边缘厚度outlinePass.pulsePeriod=2;// 脉冲周期outlinePass.visibleEdgeColor.set(0xff0000);// 可见边缘颜色outlinePass.hiddenEdgeColor.set(0x00ff00);// 隐藏边缘颜色// 设置需要描边的物体outlinePass.selectedObjects=[sphere,cube];composer.addPass(outlinePass);

4.2 参数详解

5. 完整示例

import*asTHREEfrom'three';import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';import{EffectComposer}from'three/examples/jsm/postprocessing/EffectComposer.js';import{RenderPass}from'three/examples/jsm/postprocessing/RenderPass.js';import{UnrealBloomPass}from'three/examples/jsm/postprocessing/UnrealBloomPass.js';import{OutlinePass}from'three/examples/jsm/postprocessing/OutlinePass.js';import{EffectPass}from'three/examples/jsm/postprocessing/EffectPass.js';import{AfterimageEffect}from'three/examples/jsm/effects/AfterimageEffect.js';constscene=newTHREE.Scene();scene.background=newTHREE.Color(0x000000);constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(5,4,8);camera.lookAt(0,0,0);constrenderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.toneMapping=THREE.ReinhardToneMapping;document.body.appendChild(renderer.domElement);constcontrols=newOrbitControls(camera,renderer.domElement);controls.enableDamping=true;// 光源constambientLight=newTHREE.AmbientLight(0x404040,0.3);scene.add(ambientLight);constpointLight=newTHREE.PointLight(0xffffff,1);pointLight.position.set(2,3,4);scene.add(pointLight);// 创建物体constgeometry=newTHREE.SphereGeometry(0.8,64,64);constmaterial=newTHREE.MeshStandardMaterial({color:0xff6600,metalness:0.5,roughness:0.3,emissive:0x442200});constsphere=newTHREE.Mesh(geometry,material);sphere.castShadow=true;scene.add(sphere);constboxGeometry=newTHREE.BoxGeometry(1,1,1);constboxMaterial=newTHREE.MeshStandardMaterial({color:0x44aa88,metalness:0.5,roughness:0.3,emissive:0x004422});constcube=newTHREE.Mesh(boxGeometry,boxMaterial);cube.position.set(1.5,0,1.5);cube.castShadow=true;scene.add(cube);consttorusGeometry=newTHREE.TorusKnotGeometry(0.6,0.2,100,16);consttorusMaterial=newTHREE.MeshStandardMaterial({color:0x88aaff,metalness:0.7,roughness:0.2,emissive:0x004466});consttorus=newTHREE.Mesh(torusGeometry,torusMaterial);torus.position.set(-1.5,0,-1.5);torus.castShadow=true;scene.add(torus);// 地面constplaneGeometry=newTHREE.PlaneGeometry(10,10);constplaneMaterial=newTHREE.MeshStandardMaterial({color:0x224466,side:THREE.DoubleSide});constplane=newTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x=-Math.PI/2;plane.position.y=-1;plane.receiveShadow=true;scene.add(plane);// 创建 EffectComposerconstcomposer=newEffectComposer(renderer);// 渲染通道constrenderPass=newRenderPass(scene,camera);composer.addPass(renderPass);// 泛光效果constbloomPass=newUnrealBloomPass(newTHREE.Vector2(window.innerWidth,window.innerHeight),1.5,0.4,0.85);bloomPass.threshold=0.1;bloomPass.strength=0.8;bloomPass.radius=0.5;composer.addPass(bloomPass);// 轮廓描边constoutlinePass=newOutlinePass(newTHREE.Vector2(window.innerWidth,window.innerHeight),scene,camera);outlinePass.edgeStrength=3;outlinePass.edgeGlow=0.5;outlinePass.edgeThickness=1;outlinePass.pulsePeriod=2;outlinePass.visibleEdgeColor.set(0xff6600);outlinePass.selectedObjects=[sphere,cube,torus];composer.addPass(outlinePass);// GUI 控制importGUIfrom'lil-gui';constgui=newGUI();constbloomFolder=gui.addFolder('泛光控制');bloomFolder.add(bloomPass,'threshold',0,1).name('亮度阈值');bloomFolder.add(bloomPass,'strength',0,2).name('强度');bloomFolder.add(bloomPass,'radius',0,1).name('半径');bloomFolder.open();constoutlineFolder=gui.addFolder('轮廓控制');outlineFolder.add(outlinePass,'edgeStrength',0,5).name('边缘强度');outlineFolder.add(outlinePass,'edgeGlow',0,1).name('边缘发光');outlineFolder.add(outlinePass,'edgeThickness',0,3).name('边缘厚度');outlineFolder.add(outlinePass,'pulsePeriod',0,5).name('脉冲周期');outlineFolder.open();// 动画lettime=0;functionanimate(){requestAnimationFrame(animate);time+=0.01;sphere.rotation.y+=0.01;cube.rotation.x+=0.01;cube.rotation.y+=0.01;torus.rotation.x+=0.01;torus.rotation.y+=0.02;// 动态光源pointLight.position.x=2+Math.sin(time)*1.5;pointLight.position.z=4+Math.cos(time)*1.5;controls.update();composer.render();}animate();window.addEventListener('resize',onWindowResize,false);functiononWindowResize(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();composer.setSize(window.innerWidth,window.innerHeight);}

6. 特效对比

7. 总结