BabylonJS - Ống kính pháo sáng

Khi ánh sáng bị phân tán và rơi vào hình ảnh, bạn sẽ thấy một hình ảnh khác về ngoại hình và màu sắc cũng thay đổi. Khi bạn phát triển một trò chơi để hiển thị sự xuất hiện thực tế của hiệu ứng ánh sáng, ống kính lóa sẽ được sử dụng. Hãy xem xét các tia nắng mặt trời chiếu vào gương và hiệu ứng nhìn thấy nó chủ yếu được gọi là Lens Flare.

Cú pháp

Sau đây là cú pháp để tạo ống kính lóa:

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

Thông số

Xem xét các thông số sau để tạo ra hiện tượng lóa ống kính:

Name - Tên được đặt cho hệ thống thấu kính.
Light - Đây có thể là nguồn sáng hoặc máy ảnh.
Scene - Cảnh mà ống kính lóa sẽ được thêm vào.

Để thêm pháo sáng vào cảnh, hãy thực hiện lệnh sau:

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

Size - Giá trị nổi giữa 0 và 1.
Position - Nguồn (bộ phát) của ống kính lóa (có thể là máy ảnh, đèn hoặc lưới).
Lensflaresystem - Đối tượng được tạo bằng cách sử dụng lớp lensflaresystem.

Bản giới thiệu

<!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 light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, -1, 0), scene);
            light1.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2);
            light1.intensity = 0.5;
            
            var bigdiamond = BABYLON.Mesh.CreateSphere("sphere", 32,6, scene);
            bigdiamond.visibility = 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>