three.js lensare光源

一般用來模擬太陽光光暈

效果：

其實從調用的邏輯來推測（沒看過源碼），就是貼圖，將太陽、光線、光暈分別沿 點光源起點和target這條直線貼

核心邏輯，由於示例中的光線貼出來是橫向的，因此直接抹去

   // 添加 lens flares
   const textureLoader = new THREE.TextureLoader();
   textureLoader.load("../images/lensflare0.png",textureFlare0=> {
           textureLoader.load("../images/lensflare2.png", textureFlare2 => {
               const flareColor = new THREE.Color(0xffffff);
               flareColor.setHSL(0.55, 0.9, 1.0);

              // var lensFlare =new THREE.LensFlare( texture, size, distance, blending, color )
               //參數	描述
             //  texture	(可選) THREE.Texture 紋理用來決定光暈的形狀及樣式
              // size	(可選) 尺寸（以像素爲單位） (如果將它指定爲-1，將使用紋理本身的尺寸)
             //  distance	(可選)從光源（0）到攝像機（1），將光暈放置在正確的位置
            //   blending	(可選) 混合模式，光暈默認是THREE.NormalBlending
              // color	(可選) 光暈的顏色
               const lensFlare = new THREE.Lensflare();
               lensFlare.addElement(new THREE.LensflareElement(textureFlare0, 500, 0.0, flareColor));
               lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 60, 0.6));
               lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 70, 0.7));
               lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 120, 0.9));
               lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 70, 1.0));
               lensFlare.position.copy(pointLight.position);
               scene.add(lensFlare)


           })

   })

使用的圖片

 

完整代碼

 let el=document.getElementById('box')
    let app=new THREE.inithree(el,{
        axes:true,
    })
    let scene=app.scene
    let renderer=app.renderer
    let camera=app.camera
    let controls=app.controls


   camera.position.set(400, -600, 100)
   camera.lookAt(new THREE.Vector3(-400, 600, -100))

   //球體
   const sphereGeometry = new THREE.SphereGeometry(10,30,30);
   const sphereMaterial = new THREE.MeshStandardMaterial({color:0xff00ff});
   const sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
   sphere.position.set(-20,20,0);
   sphere.castShadow = true;
   scene.add(sphere);

   //立方體
   const cubeGeometry = new THREE.CubeGeometry(10,10,10);
   const cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});
   let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
   cube.position.set(30,5,-5)
   //告訴立方體需要投射陰影
   scene.add(cube);

   //底部平面
   const planeGeometry = new THREE.PlaneGeometry(5000, 5000, 20, 20);
   const planeMaterial = new THREE.MeshStandardMaterial({color: 0xaaaaaa});
   let plane = new THREE.Mesh(planeGeometry, planeMaterial);
   plane.rotation.x = -0.5 * Math.PI;
   plane.position.y = -0;
   //告訴底部平面需要接收陰影
   plane.receiveShadow = true;

   scene.add(plane);


   //燈光和光暈
   const ambientLight = new THREE.AmbientLight("#111111");
   scene.add(ambientLight);
   pointLight = new THREE.PointLight("#ffffff");
   pointLight.position.set(-400, 600, -100);
   //告訴平行光需要開啓陰影投射
   pointLight.castShadow = true;
   scene.add(pointLight)

   // 添加 lens flares
   const textureLoader = new THREE.TextureLoader();
   textureLoader.load("../images/lensflare0.png",textureFlare0=> {
           textureLoader.load("../images/lensflare2.png", textureFlare2 => {
               const flareColor = new THREE.Color(0xffffff);
               flareColor.setHSL(0.55, 0.9, 1.0);

              // var lensFlare =new THREE.LensFlare( texture, size, distance, blending, color )
               //參數	描述
             //  texture	(可選) THREE.Texture 紋理用來決定光暈的形狀及樣式
              // size	(可選) 尺寸（以像素爲單位） (如果將它指定爲-1，將使用紋理本身的尺寸)
             //  distance	(可選)從光源（0）到攝像機（1），將光暈放置在正確的位置
            //   blending	(可選) 混合模式，光暈默認是THREE.NormalBlending
              // color	(可選) 光暈的顏色
               const lensFlare = new THREE.Lensflare();
               lensFlare.addElement(new THREE.LensflareElement(textureFlare0, 500, 0.0, flareColor));
               lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 60, 0.6));
               lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 70, 0.7));
               lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 120, 0.9));
               lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 70, 1.0));
               lensFlare.position.copy(pointLight.position);
               scene.add(lensFlare)


           })

   })


   function animate() {
       controls.update()
       renderer.render(scene, camera)
       requestAnimationFrame(animate)
   }

   animate()