企业官网建设流程全解析

37. 后期库

1. 概述

后期库扩展了 Three.js 的后期特效能力，提供了更多高级特效和便捷的 API。postprocessing 是最流行的后期处理库。

┌─────────────────────────────────────────────────────────────┐ │ 后期库对比 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ postprocessing │ │ ├── 特点：功能强大、API 优雅 │ │ ├── 特效：泛光、景深、颜色校正等 │ │ ├── 性能：高 │ │ └── 适用：专业后期特效 │ │ │ │ three-nebula │ │ ├── 特点：粒子系统扩展 │ │ ├── 特效：粒子特效 │ │ ├── 性能：中等 │ │ └── 适用：粒子效果 │ │ │ │ three-mesh-bvh │ │ ├── 特点：加速结构 │ │ ├── 功能：射线检测加速 │ │ ├── 性能：极高 │ │ └── 适用：复杂场景碰撞检测 │ │ │ └─────────────────────────────────────────────────────────────┘

2. postprocessing

postprocessing 是专业的后期特效库，提供优雅的 API 和丰富的特效。

2.1 安装和导入

npminstallpostprocessing

import{EffectComposer,RenderPass,EffectPass,BloomEffect,DepthOfFieldEffect,GlitchEffect}from'postprocessing';

2.2 基础使用

import*asTHREEfrom'three';import{EffectComposer,RenderPass,EffectPass,BloomEffect}from'postprocessing';constrenderer=newTHREE.WebGLRenderer();constscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera();// 创建合成器constcomposer=newEffectComposer(renderer);// 添加渲染通道constrenderPass=newRenderPass(scene,camera);composer.addPass(renderPass);// 添加泛光效果constbloomEffect=newBloomEffect({intensity:1.0,luminanceThreshold:0.2});consteffectPass=newEffectPass(camera,bloomEffect);composer.addPass(effectPass);// 渲染composer.render();

2.3 泛光效果（BloomEffect）

import{BloomEffect}from'postprocessing';constbloomEffect=newBloomEffect({intensity:1.0,// 强度luminanceThreshold:0.2,// 亮度阈值luminanceSmoothing:0.1,// 亮度平滑radius:0.5// 半径});

2.4 景深效果（DepthOfFieldEffect）

import{DepthOfFieldEffect}from'postprocessing';constdofEffect=newDepthOfFieldEffect(camera,{focusDistance:0.5,// 焦点距离focalLength:0.1,// 焦距bokehScale:1.0// 散景缩放});

2.5 故障效果（GlitchEffect）

import{GlitchEffect}from'postprocessing';constglitchEffect=newGlitchEffect({chromaticAberrationOffset:0.02,// 色差偏移distortion:0.5,// 扭曲强度dtSize:64,// 故障块大小duration:0.2,// 持续时间intensity:0.5// 强度});

2.6 颜色校正（ColorCorrectionEffect）

import{ColorCorrectionEffect}from'postprocessing';constcolorEffect=newColorCorrectionEffect({hue:0,// 色相saturation:1.0,// 饱和度lightness:0,// 亮度contrast:1.0// 对比度});

2.7 多重效果组合

import{EffectComposer,RenderPass,EffectPass,BloomEffect,GlitchEffect,ColorCorrectionEffect}from'postprocessing';constcomposer=newEffectComposer(renderer);composer.addPass(newRenderPass(scene,camera));// 组合多个效果constbloomEffect=newBloomEffect({intensity:0.8});constglitchEffect=newGlitchEffect({intensity:0.3});constcolorEffect=newColorCorrectionEffect({saturation:1.2});consteffectPass=newEffectPass(camera,bloomEffect,glitchEffect,colorEffect);composer.addPass(effectPass);

3. three-nebula

three-nebula 是专业的粒子系统库。

3.1 安装和导入

npminstallthree-nebula

import{Emitter,Particle,Rate,Span,PointZone,RadialVelocity,Position,Mass,Radius,Life}from'three-nebula';

3.2 基础使用

import{Emitter,Rate,Span,PointZone,RadialVelocity,Position,Life,Color,Scale}from'three-nebula';constemitter=newEmitter();// 设置发射器属性emitter.setRate(newRate(newSpan(10,20),newSpan(0.1,0.5))).setInitializers([newPosition(newPointZone(0,0,0)),newRadialVelocity(1,newSpan(0,360)),newLife(2),newMass(1),newRadius(0.1,0.5)]).setBehaviours([newColor(newTHREE.Color(0xff6600),newTHREE.Color(0xffaa88)),newScale(1,0.1)]);emitter.emit();

4. three-mesh-bvh

three-mesh-bvh 用于加速射线检测。

4.1 安装和导入

npminstallthree-mesh-bvh

import{computeBoundsTree,disposeBoundsTree,acceleratedRaycast}from'three-mesh-bvh';// 扩展几何体THREE.BufferGeometry.prototype.computeBoundsTree=computeBoundsTree;THREE.BufferGeometry.prototype.disposeBoundsTree=disposeBoundsTree;// 启用加速射线检测THREE.Mesh.prototype.raycast=acceleratedRaycast;

4.2 使用 BVH 加速

constgeometry=newTHREE.BufferGeometry();// ... 设置几何体顶点// 计算 BVH 树geometry.computeBoundsTree();// 使用加速射线检测constraycaster=newTHREE.Raycaster();constintersects=raycaster.intersectObject(mesh);// 释放 BVH 树（不再需要时）geometry.disposeBoundsTree();

5. 完整示例

import*asTHREEfrom'three';import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';import{EffectComposer,RenderPass,EffectPass,BloomEffect,GlitchEffect,ColorCorrectionEffect}from'postprocessing';importGUIfrom'lil-gui';constscene=newTHREE.Scene();scene.background=newTHREE.Color(0x111122);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.shadowMap.enabled=true;document.body.appendChild(renderer.domElement);constcontrols=newOrbitControls(camera,renderer.domElement);controls.enableDamping=true;// 光源constambientLight=newTHREE.AmbientLight(0x404040,0.5);scene.add(ambientLight);constdirectionalLight=newTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(5,10,7);directionalLight.castShadow=true;scene.add(directionalLight);constpointLight=newTHREE.PointLight(0xff6600,0.5);pointLight.position.set(2,3,4);scene.add(pointLight);// 辅助对象constaxesHelper=newTHREE.AxesHelper(5);scene.add(axesHelper);constgridHelper=newTHREE.GridHelper(10,20);scene.add(gridHelper);// 物体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;sphere.receiveShadow=true;scene.add(sphere);constboxGeometry=newTHREE.BoxGeometry(0.8,0.8,0.8);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(8,8);constplaneMaterial=newTHREE.MeshStandardMaterial({color:0x336699,side:THREE.DoubleSide});constplane=newTHREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x=-Math.PI/2;plane.position.y=-1;plane.receiveShadow=true;scene.add(plane);// 后期特效constcomposer=newEffectComposer(renderer);// 渲染通道constrenderPass=newRenderPass(scene,camera);composer.addPass(renderPass);// 泛光效果constbloomEffect=newBloomEffect({intensity:0.8,luminanceThreshold:0.2,luminanceSmoothing:0.1,radius:0.5});// 故障效果constglitchEffect=newGlitchEffect({chromaticAberrationOffset:0.02,distortion:0.3,dtSize:64,duration:0.2,intensity:0.3});// 颜色校正constcolorEffect=newColorCorrectionEffect({hue:0,saturation:1.1,lightness:0,contrast:1.0});// 效果通道consteffectPass=newEffectPass(camera,bloomEffect,glitchEffect,colorEffect);composer.addPass(effectPass);// GUI 控制constgui=newGUI();constbloomFolder=gui.addFolder('泛光效果');bloomFolder.add(bloomEffect,'intensity',0,2).name('强度');bloomFolder.add(bloomEffect,'luminanceThreshold',0,1).name('亮度阈值');bloomFolder.add(bloomEffect,'radius',0,1).name('半径');bloomFolder.open();constglitchFolder=gui.addFolder('故障效果');glitchFolder.add(glitchEffect,'intensity',0,1).name('强度');glitchFolder.add(glitchEffect,'distortion',0,1).name('扭曲');glitchFolder.add(glitchEffect,'chromaticAberrationOffset',0,0.05).name('色差');glitchFolder.open();constcolorFolder=gui.addFolder('颜色校正');colorFolder.add(colorEffect,'saturation',0,2).name('饱和度');colorFolder.add(colorEffect,'contrast',0,2).name('对比度');colorFolder.add(colorEffect,'hue',-180,180).name('色相');colorFolder.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. 总结