three.js后处理之bloom 泛光

引入文件

<script src="../../plugins/threeLibrary/three.min.js"></script>
<script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script>
<script src="../../plugins/CopyShader.js"></script>
<script src="../../plugins/EffectComposer.js"></script>
<script src="../../plugins/RenderPass.js"></script>
<script src="../../plugins/ShaderPass.js"></script>
<script src="../../plugins/LuminosityHighPassShader.js"></script>
<script src="../../plugins/UnrealBloomPass.js"></script>

function initThree(elid,options) {let  scene,camera ,renderer,viewerviewer={}el =  document.getElementById(elid)const  width = el.offsetWidth, height = el.offsetHeight,asp =  width / heightrenderer = new THREE.WebGLRenderer({antialias : true});renderer.setSize(width, height);el.append(renderer.domElement);renderer.setClearColor('#000')scene = new THREE.Scene()camera = new THREE.PerspectiveCamera(45, asp, 1, 10000)camera.position.set(10,10,10)camera.lookAt(0,0,0)scene.add(camera)viewer.scene=sceneviewer.camera=cameraviewer.renderer=rendererconst controls = new THREE.OrbitControls( camera, renderer.domElement );// 如果使用animate方法时，将此函数删除controls.addEventListener( 'change', ()=>{renderer.render( scene, camera );});viewer.controls=controlsrenderer.render( scene, camera );return viewer
}

 let app=new initThree('box')let scene=app.scenelet renderer=app.rendererlet camera=app.cameralet controls=app.controlsconst clock = new THREE.Clock()const group1 = new THREE.Group()group1.layers.set(1)const group2 =  new THREE.Group()scene.add(group1,group2)//add lightconst directionalLight = new THREE.DirectionalLight( '#fff' )directionalLight.position.set( 30, 30, 30 ).normalize()scene.add( directionalLight )const ambientLight = new THREE.AmbientLight('#fff',0.3) // obj 唯一 idscene.add(ambientLight)// add status/*  **** **** ****   ****/// renderer.toneMapping = THREE.ReinhardToneMapping;const box = new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshBasicMaterial({color:'red'}))group1.add(box)//如果是如果 需要 深度遍历 设置layersgroup1.traverse(e => {e.layers.set(1)})const  geometry = new THREE.IcosahedronBufferGeometry( 1, 4 );for ( let i = 0; i < 10; i ++ ) {const  color = new THREE.Color();color.setHSL( Math.random(), 0.7, Math.random() * 0.2 + 0.05 );const material = new THREE.MeshBasicMaterial( { color: color } );const sphere = new THREE.Mesh( geometry, material );sphere.position.x = Math.random() * 10 - 5;sphere.position.y = Math.random() * 10 - 5;sphere.position.z = Math.random() * 10 - 5;sphere.position.normalize().multiplyScalar( Math.random() * 4.0 + 2.0 );sphere.scale.setScalar( Math.random() * Math.random() + 0.5 );group2.add( sphere );// if ( Math.random() < 0.25 ) sphere.layers.enable( 2 ); // set layer}//创建 RenderPassconst renderScene = new THREE.RenderPass( scene, camera )//创建 bloomPassconst  bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( el.offsetWidth, el.offsetHeight  ), 1.5, 0.4, 0.85 );// bloomPass.renderToScreen = true;bloomPass.renderToScreen = true;bloomPass.threshold = 0;bloomPass.strength = 5;bloomPass.radius = 0;//创建 EffectComposerconst  bloomComposer = new THREE.EffectComposer( renderer )bloomComposer.setSize( el.offsetWidth,  el.offsetHeight );bloomComposer.addPass( renderScene );// 眩光通道bloomPass插入到composerbloomComposer.addPass( bloomPass )bloomComposer.render()//set controls// controls.addEventListener( 'change', function () {//     bloomComposer.render()// } )// controls.autoRotate = false//when window resizerenderer.autoClear = false //这个一定要加上 !!!!!!!function render() {//render layer0 boomrenderer.clear()camera.layers.set(0)bloomComposer.render()//render layer1 normalrenderer.clearDepth()camera.layers.set(1)renderer.render(scene,camera)controls.update(clock.getDelta())requestAnimationFrame(render)}render()