three.js 实现辉光原生JS

在three.js后期处理中，实现通道辉光效果，效果图如下：

 一、模型创建

        在三维场景中，创建了两个对象mesh（正方体）bmesh（球体）

1.  
   //创建模型
2.  
   //正方体
3.  
   var geometry = new THREE.BoxGeometry(100,100,100);
4.  
   var material = new THREE.MeshLambertMaterial({
5.  
   color:0x0000ff
6.  
   });
7.  
   var mesh = new THREE.Mesh(geometry,material);
8.  
   mesh.layers.set(0);
9.  
   scene.add(mesh);
10.  
    //球体
11.  
    var bgeometry = new THREE.SphereGeometry(60,40,40);
12.  
    var bmaterial = new THREE.MeshLambertMaterial({
13.  
    color: 0xff5500,
14.  
    transparent:true,
15.  
    opacity:0.8,
16.  
    wireframe:true
17.  
    });
18.  
    var bmesh = new THREE.Mesh(bgeometry,bmaterial);
19.  
    bmesh.position.y = 100;
20.  
    bmesh.layers.set(1);
21.  
    scene.add(bmesh);

        PS：如果仅实现全场景的全局辉光效果，可直接在场景中进行后述光晕的设置，但是为了实现局部辉光，让一个物体发光，另一个物体正常显示，我们采用layer图层显示，对两个对象设置不同的图层，以实现不同的渲染显示。

二、光晕设置

        这里需要用到如下三个对象，需要从three中导包

1.  
   import { RenderPass } from "./three/examples/jsm/postprocessing/RenderPass.js";
2.  
   import { UnrealBloomPass} from "./three/examples/jsm/postprocessing/UnrealBloomPass.js";
3.  
   import { EffectComposer } from "./three/examples/jsm/postprocessing/EffectComposer.js";

        通过构造函数，创建对象如下：

1.  
   //设置光晕
2.  
   var composer = new EffectComposer(renderer); //效果组合器
3.  
   //创建通道
4.  
   var renderScene = new RenderPass(scene, camera);
5.  
   //创建通道
6.  
   var bloomPass = new UnrealBloomPass(
7.  
   //参数一：泛光覆盖场景大小，二维向量类型
8.  
   new THREE.Vector2(window.innerWidth, window.innerHeight),
9.  
   //参数二：bloomStrength 泛光强度，值越大明亮的区域越亮，较暗区域变亮的范围越广
10.  
    1.5,
11.  
    //参数三：bloomRadius 泛光散发半径
12.  
    0.3,
13.  
    //参数四：bloomThreshold 泛光的光照强度阈值，如果照在物体上的光照强度大于该值就会产生泛光
14.  
    0.75
15.  
    );

        赋值间接对象，组合composer

1.  
   //赋值间接对象
2.  
   var params = {
3.  
   exposure: 0,
4.  
   bloomStrength: 1.5,
5.  
   bloomThreshold: 0,
6.  
   bloomRadius: 0,
7.  
   };
8.  
   bloomPass.threshold = params.bloomThreshold;
9.  
   bloomPass.strength = params.bloomStrength;
10.  
    bloomPass.radius = params.bloomRadius;
11.  
    composer.addPass(renderScene);
12.  
    composer.addPass(bloomPass);

三、渲染

1.  
   function render(){
2.  
   camera.layers.set(0);
3.  
   composer.render();
4.  
   camera.layers.set(1);
5.  
   renderer.render(scene, camera);
6.  
   requestAnimationFrame(render);
7.  
   }
8.  
   render();

这篇好文章是转载于：学新通技术网