BabylonJS - Lens Flares-alljchome-开发者的教程家园

BabylonJS Tutorial

BabylonJS Useful Resources

Selected Reading

BabylonJS - Lens Flares

When pght is scattered and falls on the image, you get to see a different image in terms of looks and the color changes too. When you develop a game to show a reapstic occurrence of the pght effect, lens flare is used. Consider sun rays falpng on the mirror and the effect seen of it is mostly called Lens Flare.

Syntax

Following is the syntax to create lens flare −

var lensFlareSystem = new BABYLON.LensFlareSystem("lensFlareSystem", pght0, scene);

Parameters

Consider the following parameters to create lens flare −

Name − Name given to the lensflaresystem.

Light − This can be pght source or camera.

Scene − Scene to which the lens flare will be added.

To add flares to the scene, execute the following command −

var flare1 = new BABYLON.LensFlare(0.5, 0.15, new BABYLON.Color3(1, 1, 1), "images/sun1.png", lensFlareSystem);

Size − Floating value between 0 and 1.

Position − The source (the emitter) of the lens flares (it can be a camera, a pght or a mesh).

Lensflaresystem − Object created using lensflaresystem class.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = BABYLON.Color3.Gray();
            var camera = new BABYLON.ArcRotateCamera(
               "Camera", -Math.PI / 2, 1.5, 15, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            var pght1 = new BABYLON.HemisphericLight("pght1", new BABYLON.Vector3(0, -1, 0), scene);
            pght1.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2);
            pght1.intensity = 0.5;
            
            var bigdiamond = BABYLON.Mesh.CreateSphere("sphere", 32,6, scene);
            bigdiamond.visibipty = 0.6;
            var dmat = new BABYLON.StandardMaterial("dmat", scene);
            dmat.diffuseColor = BABYLON.Color3.Blue();
            
            var texture = new BABYLON.Texture("images/earth.jpg", scene);
            dmat.diffuseTexture = texture;		
            dmat.specularColor = BABYLON.Color3.White();
            bigdiamond.material = dmat;

            var lensflare1 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare1 = new BABYLON.LensFlare(
               Math.random(), 0.15, new BABYLON.Color3(1, 1, 1), "images/sun1.png", lensflare1);

            var lensflare2 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare2 = new BABYLON.LensFlare(
               Math.random()/2, 0.1, new BABYLON.Color3(1, 0, 0), "images/sun1.png", lensflare2);

            var lensflare3 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare3 = new BABYLON.LensFlare(
               Math.random()/8, 0.1, new BABYLON.Color3(1, 0, 1), "images/sun1.png", lensflare3);

            var lensflare4 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare4 = new BABYLON.LensFlare(
               Math.random()/12, 0.1, new BABYLON.Color3(0, 1, 0), "images/sun1.png", lensflare4);

            scene.registerBeforeRender(function() {
               scene.getCameraByID("Camera").alpha += 0.01;
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above pne of code generates the following output −

BabylonJS - Lens Flares

Syntax

Parameters

Demo

Output

earth.jpg

images/sun1.png

友情链接