BabylonJS - Các phần tử cơ bản

Babylon.js là một khuôn khổ phổ biến giúp xây dựng trò chơi 3D cho các nhà phát triển. Nó có các chức năng tích hợp để thực hiện các chức năng 3D. Hãy để chúng tôi tạo một bản demo đơn giản bằng Babylon.js và hiểu các chức năng cơ bản cần thiết để bắt đầu.

Đầu tiên chúng ta sẽ tạo một bản demo chứa các yếu tố cơ bản của Babylon.js. Ngoài ra, chúng ta cũng sẽ tìm hiểu các chức năng khác nhau của Babylon.js.

Demo mẫu 1

Trong phần này, chúng ta sẽ học cách tạo bản demo chứa các phần tử cơ bản của BabylonJS.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</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 = new BABYLON.Color3(1, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            
            var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            
            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(-5, 0, 0); 
            
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
            
            cylinder.position = new BABYLON.Vector3(5, 0, 0);	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Để chạy BabylonJS, chúng tôi cần các trình duyệt hiện đại có hỗ trợ WEBGL. Các trình duyệt mới nhất -Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, v.v. có hỗ trợ WEBGL và các bản trình diễn có thể được thực thi trên cùng một nền tảng để xem kết quả. Tạo một thư mục để lưu trữ các tệp cho babylonjs. Tìm nạp tệp BabylonJSscripts mới nhất từ ​​trang BabylonJS. Tất cả các liên kết demo trong hướng dẫn này đều được thử nghiệm với phiên bản babylonjs 3.3.

Bước 1

  • Tạo một trang html đơn giản và bao gồm tệp Babylon.js.

  • Tạo một thẻ canvas được sử dụng để hiển thị nội dung bởi BabylonJSinside thẻ body như hình dưới đây.

  • Thêm css vào canvas để chiếm toàn bộ chiều rộng và chiều cao của màn hình.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   <body>
      <canvas id = "renderCanvas"></canvas>
   </body>
</html>

Bước 2

Bây giờ chúng ta hãy bắt đầu với BabylonJScode để hiển thị nội dung trên canvas.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</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);
      </script>
   </body>
</html>

Bây giờ, hãy thêm thẻ script vào cấu trúc html và lưu trữ tham chiếu canvas trong canvas biến.

Để bắt đầu với Babylon.js, hãy tạo một phiên bản engine và chuyển tham chiếu canvas để hiển thị trên đó.

<script type = "text/javascript">
   var canvas = document.getElementById("renderCanvas");
   var engine = new BABYLON.Engine(canvas, true);
</script>

Đối tượng toàn cầu BABYLON chứa tất cả các hàm Babylon.js có sẵn trong engine.

Bước 3

Trong bước này, đầu tiên chúng ta sẽ tạo một khung cảnh.

Cảnh là nơi tất cả nội dung sẽ được hiển thị. Chúng tôi sẽ tạo các loại đối tượng khác nhau và thêm các đối tượng giống nhau vào cảnh để làm cho nó hiển thị trên màn hình. Để tạo cảnh, hãy thêm đoạn mã sau vào cấu trúc html đã được tạo. Hiện tại, chúng tôi sẽ thêm vào mã đã được tạo như một phần tiếp theo của cấu trúc html ở trên.

var createScene  = function() {
   var scene = new BABYLON.Scene(engine);
   scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();

Tệp html cuối cùng sẽ trông như sau:

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</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 = new BABYLON.Color3(0, 1, 0);
            return scene;
         };
         var scene = createScene();
      </script>
   </body>
</html>

Trong ví dụ trên, hàm CreateScene được định nghĩa và var scene = createScene () đang gọi hàm.

Hàm CreateScene có cảnh được tạo bên trong nó và dòng tiếp theo thêm màu cho cảnh, được thực hiện bằng cách sử dụng BABYLON.Color3 (1, 0.8, 0.8) và màu ở đây là màu hồng.

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);

Thực hiện liên kết demo trên trong trình duyệt sẽ không hiển thị bất cứ thứ gì ngay bây giờ trên màn hình trình duyệt. Có một bước nữa sẽ được thêm vào mã được gọi là engine.runRenderLoop như trong bước 4.

Bước 4

Để làm cho cảnh thực sự hiển thị trên màn hình, chúng ta cần kết xuất nó bằng cách sử dụng lệnh gọi engine.runRenderLoop. Bây giờ chúng ta hãy xem điều này được thực hiện như thế nào.

Vòng lặp kết xuất

engine.runRenderLoop(function() {
   scene.render();
});

Hàm Engine.runRenderLoop gọi cảnh.render, hàm này sẽ hiển thị cảnh và hiển thị nó cho người dùng. .Html cuối cùng sẽ trông như sau:

<!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 = new BABYLON.Color3(1, 0.8, 0.8);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Lưu tệp trên dưới dạng basicscene.html và kiểm tra kết quả đầu ra trong trình duyệt. Màn hình hiển thị có màu hồng như hình dưới đây -

Bước 5

Bây giờ chúng ta đã có cảnh, chúng ta phải thêm camera vào đó.

Thêm máy ảnh và ánh sáng

Đoạn mã được đưa ra dưới đây thêm máy ảnh vào cảnh. Có rất nhiều loại máy ảnh có thể được sử dụng trên Babylon.

ArcRotateCameralà một camera quay xung quanh mục tiêu. Nó có thể được điều khiển bằng các sự kiện chuột, con trỏ hoặc chạm. Các tham số bắt buộc là tên, alpha, beta, bán kính, mục tiêu và cảnh. Hãy để chúng tôi thảo luận về các chi tiết của máy ảnh trong phần tiếp theo.

var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

Bây giờ, chúng ta cần hiểu cách thêm ánh sáng.

Đèn được sử dụng để tạo ra sự khuếch tán và màu sắc đặc trưng mà mỗi pixel nhận được. Có nhiều loại đèn. Chúng ta sẽ tìm hiểu về các loại đèn chiếu sáng trong phần đèn chiếu sáng.

Ở đây tôi đang sử dụng PointLight trên hiện trường. PointLight được phát ra theo mọi hướng giống như TheSun. Các thông số là tên, vị trí và cảnh sẽ được sử dụng.

Để thêm ánh sáng, hãy thực thi đoạn mã sau:

var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);

Bước 6

Bây giờ chúng ta hãy xem cách thêm hình dạng.

Thêm hình dạng

Bản demo được chia sẻ ở trên có 4 hình dạng được thêm vào.

  • Sphere
  • Torus
  • Box
  • Cylinder

Để thêm hình cầu, hãy thực thi đoạn mã sau:

var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);

Khi hình cầu được thêm vào, mã trông như sau:

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      <style>
         html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
      </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 = new BABYLON.Color3(1, 0.8, 0.8);
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            scene.activeCamera.attachControl(canvas);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Đầu ra

Đoạn mã trên tạo ra kết quả sau:

Bây giờ chúng ta hãy thêm các hình dạng khác - Torus và Box. Thực hiện đoạn mã sau để thêm hình dạng Torus.

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);

Chúng tôi sẽ thêm một vị trí vào hộp. BABYLON.Vector3 (-5, 0, 0) lấy theo hướng x, y và z.

Khi thực thi, đoạn mã trên tạo ra kết quả sau:

Bây giờ chúng ta hãy thêm hình dạng cuối cùng được hiển thị trong ảnh chụp màn hình ở trên - hình trụ.

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);

Vị trí được thêm vào hình trụ là x hướng 5. Mã cuối cùng như hình dưới đây:

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</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 = new BABYLON.Color3(1, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            
            var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            
            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(-5, 0, 0); 
            
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
            cylinder.position = new BABYLON.Vector3(5, 0, 0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Đầu ra

Khi thực thi, đoạn mã trên sẽ tạo ra kết quả sau:

Các hình dạng sẽ di chuyển theo hướng bạn di chuyển con trỏ; tương tự được thực hiện bằng cách sử dụng điều khiển đính kèm của máy ảnh vào hiện trường.

scene.activeCamera.attachControl(canvas);

Bây giờ chúng ta hãy thảo luận chi tiết từng hình dạng.

Đây là bản tóm tắt của tất cả các hình dạng và cú pháp -

Sr.No Hình dạng Cú pháp
1 Cái hộp 
var box = BABYLON.Mesh.CreateBox(
   "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
2 Quả cầu 
var sphere = BABYLON.Mesh.CreateSphere(
   "sphere", 10.0, 10.0, scene, 
   false, BABYLON.Mesh.DEFAULTSIDE);
3 Máy bay 
var plane = BABYLON.Mesh.CreatePlane(
   "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
4 Đĩa 
var disc = BABYLON.Mesh.CreateDisc(
   "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
5 Hình trụ 
var cylinder = BABYLON.Mesh.CreateCylinder(
   "cylinder", 3, 3, 3, 6, 1, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
6 Torus 
var torus = BABYLON.Mesh.CreateTorus(
   "torus", 5, 1, 10, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
7 Thắt nút 
var knot = BABYLON.Mesh.CreateTorusKnot(
   "knot", 2, 0.5, 128, 64, 2, 3, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
số 8 Lưới dòng 
var lines = BABYLON.Mesh.CreateLines("lines", [
   new BABYLON.Vector3(-10, 0, 0),
   new BABYLON.Vector3(10, 0, 0),
   new BABYLON.Vector3(0, 0, -10),
   new BABYLON.Vector3(0, 0, 10)
], scene);
9 Dấu gạch ngang 
var dashedlines = BABYLON.Mesh.CreateDashedLines(
   "dashedLines", [v1, v2, ... vn], 
   dashSize, gapSize, dashNb, scene);
10 Ruy-băng 
var ribbon = BABYLON.Mesh.CreateRibbon(
   "ribbon", 
   [path1, path2, ..., pathn], 
   false, false, 0, 
   scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
11 Ống 
var tube = BABYLON.Mesh.CreateTube(
   "tube", 
   [V1, V2, ..., Vn], 
   radius, tesselation, 
   radiusFunction, 
   cap, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
12 Đất 
var ground = BABYLON.Mesh.CreateGround(
   "ground", 6, 6, 2, scene);
13 Mặt đất từ ​​độ cao 
var ground = BABYLON.Mesh.CreateGroundFromHeightMap(
   "ground", "heightmap.jpg", 200, 200, 250, 0, 10, 
   scene, false, successCallback);
14 Đất lát gạch 
var precision = {"w" : 2, "h" : 2};
var subdivisions = {'h' : 8, 'w' : 8};
var tiledGround = BABYLON.Mesh.CreateTiledGround(
   "Tiled Ground", -3, -3, 3, 3, 
   subdivisions, precision, scene, false);

Phần tử cơ bản - Vị trí, Xoay và Tỷ lệ

Trong phần này, chúng ta sẽ tìm hiểu cách định vị, xoay hoặc chia tỷ lệ các phần tử mà chúng ta đã thêm cho đến nay.

Chúng ta đã tạo ra hộp, hình cầu, hình trụ, nút thắt, v.v ... Bây giờ, chúng ta sẽ xem cách định vị, chia tỷ lệ và xoay các hình.

Sr.No. Yếu tố & Mô tả
1 Chức vụ

Với sự thay đổi vị trí, lưới sẽ được thay đổi từ vị trí này sang vị trí khác.
2 Vòng xoay

Với chuyển động quay, lưới sẽ được quay xung quanh lưới.
3 Mở rộng quy mô

Việc chia tỷ lệ của lưới có thể được thực hiện đối với trục x, y hoặc z.

Yếu tố cơ bản - Nuôi dạy con cái

Với Nuôi dạy con cái, chúng ta sẽ tạo ra mối quan hệ cha mẹ - con cái giữa các mắt lưới và xem cách chúng cư xử. Vì vậy, bất kỳ phép biến đổi nào bạn áp dụng cho cha mẹ, điều tương tự cũng sẽ được áp dụng cho con. Bây giờ chúng ta hãy cùng hiểu như vậy với bản demo được hiển thị bên dưới.

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 = new BABYLON.Color3(0, 1, 0);
         
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
         
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);

            var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
            boxa.position = new BABYLON.Vector3(0,0.5,0);

            var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
            boxb.position = new BABYLON.Vector3(3,0.5,0);		
            boxb.scaling = new BABYLON.Vector3(2,1,2);

            var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
            boxc.parent = boxb;
            boxc.position.z = -3;
         
            var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
            ground.position = new BABYLON.Vector3(0,0,0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Đầu ra

Giải trình

Chúng tôi đã tạo ra 3 hộp trong lưới trên. Trong bản demo, việc chia tỷ lệ boxb được áp dụng và nó được chỉ định làm cha mẹ cho boxc, nó cũng chia tỷ lệ kể từ hộp cha mẹ của nó và cùng một tỷ lệ được chia tỷ lệ. Bạn có thể thử với bản demo để xem cách thức hoạt động của liên kết cha-con.

Để tạo lưới, bạn phải sử dụng lưới mẹ của một lưới khác -

  • child.parent = parentmesh;

Yếu tố cơ bản - Môi trường

Bây giờ chúng ta hãy thảo luận về môi trường cảnh trong phần này. Chúng ta sẽ nói vềscene background color, ambientcolor, skyboxes, fog mode, v.v. trên một cảnh.

Chúng tôi đã thấy scene background color is demos mà chúng tôi đã tạo cho đến nay.

Cảnh-màu nền

Bây giờ chúng ta hãy xem cách hoạt động của màu nền cảnh.

Cú pháp

Sau đây là cú pháp cho màu nền của cảnh:

scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();

Thuộc tính trên sẽ thay đổi màu nền của cảnh.

Khung cảnh Màu xung quanh

Bây giờ chúng ta hãy xem cách hoạt động của màu xung quanh cảnh.

Cú pháp

Sau đây là cú pháp cho màu xung quanh cảnh:

scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);

AmbientColor được sử dụng cùng với StandardMaterialmàu sắc và kết cấu xung quanh. Nếu không có màu xung quanh cho cảnhStandardMaterial.ambientColor và StandardMaterial.ambientTexturekhông có hiệu lực. StandardMaterial ambientColor / ambientTexture sẽ hoạt động sau khi áp dụng ambientColor cho cảnh. Theo mặc định, cảnh được cung cấpscene.ambientColor và đặt thành Color3 (0, 0, 0), có nghĩa là không có màu xung quanh.

Chế độ sương mù cảnh

Bây giờ chúng ta sẽ hiểu cách hoạt động của Chế độ sương mù cảnh.

Cú pháp

Sau đây là cú pháp cho Chế độ sương mù cảnh.

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

Danh sách các chế độ sương mù khả dụng sau đây:

  • BABYLON.Scene.FOGMODE_NONE - mặc định một, sương mù bị vô hiệu hóa.

  • BABYLON.Scene.FOGMODE_EXP - mật độ sương mù tuân theo một hàm số mũ.

  • BABYLON.Scene.FOGMODE_EXP2 - tương tự như trên nhưng nhanh hơn.

  • BABYLON.Scene.FOGMODE_LINEAR - mật độ sương mù tuân theo một hàm tuyến tính.

Nếu chế độ sương mù EXP hoặc EXP2 được xác định, thì bạn có thể xác định mật độ trên đó như sau:

scene.fogDensity = 0.01;

Nếu chế độ sương mù là TUYẾN TÍNH, thì bạn có thể xác định nơi sương mù bắt đầu và kết thúc như sau:

scene.fogStart = 20.0;
scene.fogEnd = 60.0;

Để tạo màu cho sương mù, hãy thực thi đoạn mã sau:

scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

Skybox

Skybox là một cách tạo nền trong trò chơi để làm cho cảnh trông chân thực. Nó giống như một lớp bao bọc xung quanh màn hình của bạn, bao phủ với kết cấu được sử dụng cho vật liệu. Chọn hình ảnh của bạn đúng cách để làm cho hình ảnh trông chân thực cho cảnh bạn muốn tạo. Để tạo skybox, bạn phải tạo một hộp và áp dụng vật liệu cho nó. Chúng ta sẽ thảo luận chi tiết về các vật liệu khác nhau trong chương tiếp theo.

Bây giờ, chúng ta sẽ xem cách tạo một skybox bằng cách sử dụng hộp và vật liệu.

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);

Chúng tôi sẽ tạo một hộp có kích thước 100 để nó bao phủ toàn bộ cảnh. Chúng tôi sẽ bắt đầu bằng cách cho vật liệu vào hộp được thực hiện như sau:

var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);

Đối với vật liệu này, chúng tôi sẽ gán các thuộc tính.

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);

Chúng ta phải sử dụng kết cấu phản chiếu mà về cơ bản được sử dụng để tạo ra một tấm gương giống như vật liệu. Thuộc tính kết cấu phản chiếu sử dụng CubeTexture lấy hình ảnh làm đầu vào. Vì khối lập phương có 6 mặt nên hình ảnh yêu cầu cho skybox phải là 6, tức là bên trong nó phải được lưu trữ dưới dạng skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz. Hình ảnh được sử dụng cho skybox được dán bên dưới; chúng là các mặt của khối lập phương trên cả sáu mặt. Khi bạn áp dụng một kết cấu cho hình dạng, nó sẽ cung cấp các chi tiết của hình ảnh được sử dụng và làm cho cảnh trông chân thực. Chúng tôi đã sử dụng chế độ điều phối là SKYBOX_MODE như hình dưới đây -

skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

Có các thuộc tính khác được sử dụng cho material như backfaceCulling, diffuseColor, specularColor, disableLighting, v.v. Các thuộc tính được giải thích chi tiết trong phần material.

Trong bản demo, chúng tôi sẽ hiển thị một cảnh môi trường được tạo bằng cách sử dụng skybox, một quả cầu quay trong cảnh và một chiếc máy bay di chuyển xung quanh. Sương mù được áp dụng cho cảnh mà bạn sẽ nhận thấy khi xoay.

Demo Hiển thị Cảnh Môi trường

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo</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);
            var light = new BABYLON.PointLight("Omni", 
            new BABYLON.Vector3(10, 50, 50), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
            camera.attachControl(canvas, true);

            var material1 = new BABYLON.StandardMaterial("mat1", scene);
            material1.diffuseTexture = new BABYLON.Texture("images/tsphere.jpg", scene);

            var sphere = BABYLON.Mesh.CreateSphere("red", 32, 2, scene);
            sphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
            sphere.material = material1;		

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
            scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
            scene.fogDensity = 0.01;

            //skybox		
            var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
            
            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            
            skyboxMaterial.disableLighting = true;
            skybox.material = skyboxMaterial;


            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/plane.png", 8, 1000, scene);
            
            var plane = new BABYLON.Sprite("plane", spriteManagerPlayer);
            plane.position.x = -2;
            plane.position.y = 2;	
            plane.position.z = 0;	


            var alpha = 0;
            var x = 2;
            var y = 0;
            scene.registerBeforeRender(function () {
               scene.fogDensity = Math.cos(alpha) / 10;
               alpha += 0.02;
               sphere.rotation.y += 0.01;
               y += 0.05; 
               if (x > 50) {
                  x = -2;
               }
               plane.position.x = -x;
               x += 0.02; 
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Đầu ra

Giải trình

Trong ví dụ trên, chúng tôi đã sử dụng mã sau cho sương mù:

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;

  • scene.fogMode = BABYLON.Scene.FOGMODE_EXP - Ở đây, mật độ sương mù tuân theo một hàm số mũ.

  • scene.registerBeforeRender = Với điều này, mật độ sương mù thay đổi như sau:

var alpha = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
});

Giá trị của alpha tiếp tục tăng 0,02 khi nó đi trong một vòng lặp như trong hàm trên.

Ở đây, chúng tôi đã thêm một hình ảnh sprite máy bay và thay đổi vị trí của nó bằng scene.registerBeforeRender chức năng như sau -

var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
   sphere.rotation.y += 0.01;
   y += 0.05; 
   if (x > 50) {
      x = -2;
   }
   plane.position.x = -x;
   x += 0.02; 
});
return scene;
};s

Chúng tôi sẽ thay đổi trục x của máy bay và đặt lại khi nó đạt hơn 50.

Ngoài ra, hình cầu được quay dọc theo trục y. Điều này được hiển thị trong ví dụ trên. Giá trị được thay đổi bằng cách sử dụnghere.rotation.y.

Kết cấu được sử dụng cho hình cầu là - images/tshphere.jpg. Các hình ảnh được lưu trữ trong thư mục image / local và cũng được dán bên dưới để tham khảo. Bạn có thể tải xuống bất kỳ hình ảnh nào bạn chọn và sử dụng trong liên kết demo.

Chúng ta cần sáu hình ảnh cho một khối lập phương. Các hình ảnh được lưu trữ cục bộ trong thư mục images / cubetexture /. Bạn có thể tải xuống bất kỳ hình ảnh nào bạn chọn, nhưng khi bạn lưu nó, hãy lưu chúng dưới dạng nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Xin lưu ý rằng các hình ảnh được chọn phải theo thứ tự để nền trông chân thực như hình được hiển thị cho skybox.

Các hình ảnh được sử dụng để tạo skybox như sau: images/cubetexture/skybox

skybox_nx

skybox_ny

skybox_nz

skybox_px

skybox_py

skybox_pz

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved