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

25. 内置特效1. 概述Three.js 提供了多种内置后期特效包括泛光Bloom、景深Depth of Field、轮廓描边Outline、颜色校正等。这些特效可以组合使用创造出丰富的视觉效果。┌─────────────────────────────────────────────────────────────┐ │ 内置特效类型 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 泛光效果 (UnrealBloomPass) │ │ ├── 模拟高光溢出 │ │ ├── 增强亮部区域 │ │ └── 参数强度、半径、阈值 │ │ │ │ 景深效果 (BokehPass) │ │ ├── 模拟相机焦距 │ │ ├── 背景模糊 │ │ └── 参数焦距、光圈、焦点距离 │ │ │ │ 轮廓描边 (OutlinePass) │ │ ├── 物体边缘高亮 │ │ ├── 选择特定物体 │ │ └── 参数边缘颜色、强度 │ │ │ │ 颜色校正 (Afterimage) │ │ ├── 残影效果 │ │ ├── 运动模糊 │ │ └── 参数衰减、阻尼 │ │ │ └─────────────────────────────────────────────────────────────┘2. 泛光效果UnrealBloomPass泛光效果模拟高亮区域的发光效果常用于科幻、梦幻风格。2.1 安装和导入import{EffectComposer}fromthree/examples/jsm/postprocessing/EffectComposer.js;import{RenderPass}fromthree/examples/jsm/postprocessing/RenderPass.js;import{UnrealBloomPass}fromthree/examples/jsm/postprocessing/UnrealBloomPass.js;2.2 创建泛光特效// 创建合成器constcomposernewEffectComposer(renderer);// 渲染通道constrenderPassnewRenderPass(scene,camera);composer.addPass(renderPass);// 泛光通道constbloomPassnewUnrealBloomPass(newTHREE.Vector2(window.innerWidth,window.innerHeight),1.5,0.4,0.85);bloomPass.threshold0.1;// 亮度阈值高于此值的像素会发光bloomPass.strength1.2;// 发光强度bloomPass.radius0.5;// 发光半径composer.addPass(bloomPass);2.3 参数详解参数说明范围默认值threshold亮度阈值只有高于此值的像素产生泛光0-10strength泛光强度0-31radius泛光半径0-10.53. 景深效果BokehPass景深效果模拟相机镜头对焦使背景或前景模糊。3.1 创建景深特效import{BokehPass}fromthree/examples/jsm/postprocessing/BokehPass.js;// 需要深度材质constdepthMaterialnewTHREE.MeshDepthMaterial();constbokehPassnewBokehPass(scene,camera,{focus:1.0,// 焦点距离aperture:0.025,// 光圈大小maxblur:0.01,// 最大模糊量width:window.innerWidth,height:window.innerHeight});composer.addPass(bokehPass);3.2 参数详解参数说明focus焦点距离相机到焦点的距离aperture光圈大小影响模糊程度maxblur最大模糊半径4. 轮廓描边OutlinePass轮廓描边用于高亮显示选中的物体。4.1 创建轮廓描边import{OutlinePass}fromthree/examples/jsm/postprocessing/OutlinePass.js;constoutlinePassnewOutlinePass(newTHREE.Vector2(window.innerWidth,window.innerHeight),scene,camera);outlinePass.edgeStrength3.0;// 边缘强度outlinePass.edgeGlow0.5;// 边缘发光outlinePass.edgeThickness1.0;// 边缘厚度outlinePass.pulsePeriod2;// 脉冲周期outlinePass.visibleEdgeColor.set(0xff0000);// 可见边缘颜色outlinePass.hiddenEdgeColor.set(0x00ff00);// 隐藏边缘颜色// 设置需要描边的物体outlinePass.selectedObjects[sphere,cube];composer.addPass(outlinePass);4.2 参数详解参数说明edgeStrength边缘强度edgeGlow边缘发光效果edgeThickness边缘厚度pulsePeriod脉冲周期0无脉冲visibleEdgeColor可见边缘颜色hiddenEdgeColor隐藏边缘颜色selectedObjects需要描边的物体数组5. 完整示例import*asTHREEfromthree;import{OrbitControls}fromthree/examples/jsm/controls/OrbitControls.js;import{EffectComposer}fromthree/examples/jsm/postprocessing/EffectComposer.js;import{RenderPass}fromthree/examples/jsm/postprocessing/RenderPass.js;import{UnrealBloomPass}fromthree/examples/jsm/postprocessing/UnrealBloomPass.js;import{OutlinePass}fromthree/examples/jsm/postprocessing/OutlinePass.js;import{EffectPass}fromthree/examples/jsm/postprocessing/EffectPass.js;import{AfterimageEffect}fromthree/examples/jsm/effects/AfterimageEffect.js;constscenenewTHREE.Scene();scene.backgroundnewTHREE.Color(0x000000);constcameranewTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(5,4,8);camera.lookAt(0,0,0);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.toneMappingTHREE.ReinhardToneMapping;document.body.appendChild(renderer.domElement);constcontrolsnewOrbitControls(camera,renderer.domElement);controls.enableDampingtrue;// 光源constambientLightnewTHREE.AmbientLight(0x404040,0.3);scene.add(ambientLight);constpointLightnewTHREE.PointLight(0xffffff,1);pointLight.position.set(2,3,4);scene.add(pointLight);// 创建物体constgeometrynewTHREE.SphereGeometry(0.8,64,64);constmaterialnewTHREE.MeshStandardMaterial({color:0xff6600,metalness:0.5,roughness:0.3,emissive:0x442200});constspherenewTHREE.Mesh(geometry,material);sphere.castShadowtrue;scene.add(sphere);constboxGeometrynewTHREE.BoxGeometry(1,1,1);constboxMaterialnewTHREE.MeshStandardMaterial({color:0x44aa88,metalness:0.5,roughness:0.3,emissive:0x004422});constcubenewTHREE.Mesh(boxGeometry,boxMaterial);cube.position.set(1.5,0,1.5);cube.castShadowtrue;scene.add(cube);consttorusGeometrynewTHREE.TorusKnotGeometry(0.6,0.2,100,16);consttorusMaterialnewTHREE.MeshStandardMaterial({color:0x88aaff,metalness:0.7,roughness:0.2,emissive:0x004466});consttorusnewTHREE.Mesh(torusGeometry,torusMaterial);torus.position.set(-1.5,0,-1.5);torus.castShadowtrue;scene.add(torus);// 地面constplaneGeometrynewTHREE.PlaneGeometry(10,10);constplaneMaterialnewTHREE.MeshStandardMaterial({color:0x224466,side:THREE.DoubleSide});constplanenewTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x-Math.PI/2;plane.position.y-1;plane.receiveShadowtrue;scene.add(plane);// 创建 EffectComposerconstcomposernewEffectComposer(renderer);// 渲染通道constrenderPassnewRenderPass(scene,camera);composer.addPass(renderPass);// 泛光效果constbloomPassnewUnrealBloomPass(newTHREE.Vector2(window.innerWidth,window.innerHeight),1.5,0.4,0.85);bloomPass.threshold0.1;bloomPass.strength0.8;bloomPass.radius0.5;composer.addPass(bloomPass);// 轮廓描边constoutlinePassnewOutlinePass(newTHREE.Vector2(window.innerWidth,window.innerHeight),scene,camera);outlinePass.edgeStrength3;outlinePass.edgeGlow0.5;outlinePass.edgeThickness1;outlinePass.pulsePeriod2;outlinePass.visibleEdgeColor.set(0xff6600);outlinePass.selectedObjects[sphere,cube,torus];composer.addPass(outlinePass);// GUI 控制importGUIfromlil-gui;constguinewGUI();constbloomFoldergui.addFolder(泛光控制);bloomFolder.add(bloomPass,threshold,0,1).name(亮度阈值);bloomFolder.add(bloomPass,strength,0,2).name(强度);bloomFolder.add(bloomPass,radius,0,1).name(半径);bloomFolder.open();constoutlineFoldergui.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();// 动画lettime0;functionanimate(){requestAnimationFrame(animate);time0.01;sphere.rotation.y0.01;cube.rotation.x0.01;cube.rotation.y0.01;torus.rotation.x0.01;torus.rotation.y0.02;// 动态光源pointLight.position.x2Math.sin(time)*1.5;pointLight.position.z4Math.cos(time)*1.5;controls.update();composer.render();}animate();window.addEventListener(resize,onWindowResize,false);functiononWindowResize(){camera.aspectwindow.innerWidth/window.innerHeight;camera.updateProjectionMatrix();composer.setSize(window.innerWidth,window.innerHeight);}6. 特效对比特效用途性能UnrealBloomPass泛光/发光中等BokehPass景深较高OutlinePass轮廓描边中等AfterimageEffect残影低GlitchPass故障效果低FilmPass胶片效果低7. 总结特效类用途主要参数UnrealBloomPass泛光threshold, strength, radiusBokehPass景深focus, aperture, maxblurOutlinePass轮廓edgeStrength, edgeGlow, edgeThicknessAfterimageEffect残影damp, shader