BabylonJS - องค์ประกอบพื้นฐาน

Babylon.js เป็นเฟรมเวิร์กยอดนิยมในการช่วยสร้างเกม 3 มิติสำหรับนักพัฒนา มีฟังก์ชันในตัวเพื่อใช้งานฟังก์ชัน 3D ให้เราสร้างการสาธิตง่ายๆโดยใช้ Babylon.js และทำความเข้าใจฟังก์ชันพื้นฐานที่จำเป็นในการเริ่มต้น

ก่อนอื่นเราจะสร้างการสาธิตที่มีองค์ประกอบพื้นฐานของ Babylon.js นอกจากนี้เรายังจะได้เรียนรู้ฟังก์ชันต่างๆของ Babylon.js

ตัวอย่างการสาธิต 1

ในส่วนนี้เราจะเรียนรู้วิธีสร้างการสาธิตที่มีองค์ประกอบพื้นฐานของ 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>

ในการเรียกใช้ BabylonJS เราต้องการเบราว์เซอร์ที่ทันสมัยพร้อมการสนับสนุน WEBGL เบราว์เซอร์ล่าสุด -Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+ และอื่น ๆ มีการรองรับ WEBGL และการสาธิตสามารถดำเนินการบนแพลตฟอร์มเดียวกันเพื่อดูผลลัพธ์ สร้างไดเร็กทอรีเพื่อจัดเก็บไฟล์สำหรับ babylonjs ดึงไฟล์ BabylonJSscripts ล่าสุดจากเว็บไซต์ BabylonJS ลิงก์สาธิตทั้งหมดในบทช่วยสอนนี้ได้รับการทดสอบกับ babylonjs เวอร์ชัน 3.3

ขั้นตอนที่ 1

สร้างเพจ html ง่ายๆและรวมไฟล์ Babylon.js
สร้างแท็กผ้าใบที่ใช้ในการแสดงเนื้อหาโดย BabylonJSinside แท็กเนื้อหาดังที่แสดงด้านล่าง
เพิ่ม css ลงในผืนผ้าใบเพื่อให้เต็มความกว้างและความสูงของหน้าจอ

<!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>

ขั้นตอนที่ 2

ตอนนี้ให้เราเริ่มด้วย BabylonJScode สำหรับการแสดงผลเนื้อหาบนผืนผ้าใบ

<!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>

ตอนนี้เพิ่มแท็กสคริปต์ลงในโครงสร้าง html และจัดเก็บการอ้างอิงผ้าใบในพื้นที่ตัวแปร

ในการเริ่มต้นกับ Babylon.js ให้สร้างอินสแตนซ์เอ็นจิ้นและส่งการอ้างอิงผ้าใบเพื่อแสดงผล

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

วัตถุส่วนกลางของ BABYLON มีฟังก์ชัน Babylon.js ทั้งหมดที่มีอยู่ในเครื่องยนต์

ขั้นตอนที่ 3

ในขั้นตอนนี้เราจะสร้างฉากก่อน

ฉากคือที่ที่จะแสดงเนื้อหาทั้งหมด เราจะสร้างวัตถุประเภทต่างๆและเพิ่มสิ่งที่เหมือนกันในฉากเพื่อให้มองเห็นได้บนหน้าจอ ในการสร้างฉากให้เพิ่มรหัสต่อไปนี้ในโครงสร้าง html ที่สร้างไว้แล้ว ในปัจจุบันเราจะผนวกโค้ดที่สร้างไว้แล้วเป็นส่วนต่อเนื่องกับโครงสร้าง html ข้างต้น

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

ไฟล์ html สุดท้ายจะมีลักษณะดังนี้ -

<!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>

ในตัวอย่างข้างต้นฟังก์ชัน CreateScene ถูกกำหนดและ var scene = createScene () กำลังเรียกใช้ฟังก์ชัน

ฟังก์ชัน CreateScene มีฉากที่สร้างขึ้นภายในและบรรทัดถัดไปจะเพิ่มสีให้กับฉากซึ่งทำได้โดยใช้ BABYLON.Color3 (1, 0.8, 0.8) และสีตรงนี้จะเป็นสีชมพู

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

การดำเนินการตามลิงค์สาธิตด้านบนในเบราว์เซอร์จะไม่แสดงอะไรเลยบนหน้าจอเบราว์เซอร์ มีอีกหนึ่งขั้นตอนที่จะถูกเพิ่มเข้าไปในโค้ดซึ่งเรียกว่า engine.runRenderLoop เหมือนในขั้นตอนที่ 4

ขั้นตอนที่ 4

ในการทำให้ฉากมองเห็นได้จริงบนหน้าจอเราต้องเรนเดอร์โดยใช้การโทร engine.runRenderLoop ตอนนี้ให้เราดูว่าจะทำอย่างไร

ลูปการแสดงผล

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

ฟังก์ชัน Engine.runRenderLoop เรียกใช้ scene.render ซึ่งจะแสดงฉากและทำให้ผู้ใช้มองเห็นได้ . html สุดท้ายจะมีลักษณะดังนี้ -

<!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>

บันทึกไฟล์ด้านบนเป็น Basicscene.html และตรวจสอบผลลัพธ์ในเบราว์เซอร์ หน้าจอที่แสดงเป็นสีชมพูดังภาพด้านล่าง -

ขั้นตอนที่ 5

ตอนนี้เรามีฉากแล้วเราต้องเพิ่มกล้องเข้าไป

การเพิ่มกล้องและแสง

รหัสที่ระบุด้านล่างนี้จะเพิ่มกล้องเข้าไปในฉาก มีกล้องหลายประเภทที่สามารถใช้กับบาบิโลนได้

ArcRotateCameraคือกล้องที่หมุนไปรอบ ๆ เป้าหมาย สามารถควบคุมด้วยเมาส์เคอร์เซอร์หรือสัมผัสเหตุการณ์ พารามิเตอร์ที่ต้องการ ได้แก่ ชื่ออัลฟ่าเบต้ารัศมีเป้าหมายและฉาก ให้เราคุยรายละเอียดของกล้องในส่วนต่อไป

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

ตอนนี้เราต้องเข้าใจวิธีการเพิ่มแสง

ไฟใช้ในการสร้างสีที่กระจายและเป็นพิเศษที่ได้รับจากแต่ละพิกเซล ไฟมีหลายประเภท เราจะเรียนรู้เกี่ยวกับไฟประเภทต่างๆในส่วนของไฟ

ที่นี่ฉันใช้ PointLight ในฉาก PointLight ถูกปล่อยออกมาทุกทิศทางเช่นเดียวกับดวงอาทิตย์ พารามิเตอร์คือชื่อตำแหน่งและฉากที่จะใช้

ในการเพิ่มแสงให้ดำเนินการตามรหัสต่อไปนี้ -

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

ขั้นตอนที่ 6

ตอนนี้ให้เราดูวิธีเพิ่มรูปร่าง

การเพิ่มรูปร่าง

การสาธิตที่แชร์ด้านบนมี 4 รูปร่างที่เพิ่มเข้ามา

Sphere
Torus
Box
Cylinder

ในการเพิ่มทรงกลมให้รันโค้ดต่อไปนี้ -

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

เมื่อเพิ่มทรงกลมแล้วโค้ดจะมีลักษณะดังนี้ -

<!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>

เอาต์พุต

รหัสด้านบนสร้างผลลัพธ์ต่อไปนี้ -

ตอนนี้ให้เราเพิ่มรูปทรงอื่น ๆ - Torus และกล่อง ดำเนินการรหัสต่อไปนี้เพื่อเพิ่มรูปร่าง 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);

เราจะเพิ่มตำแหน่งลงในกล่อง BABYLON.Vector3 (-5, 0, 0) ใช้ทิศทาง x, y และ z

เมื่อดำเนินการรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้ -

ตอนนี้ให้เราเพิ่มรูปร่างสุดท้ายซึ่งแสดงในภาพหน้าจอด้านบน - ทรงกระบอก

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

ตำแหน่งจะถูกเพิ่มเข้าไปในกระบอกสูบซึ่งเป็นทิศทาง x 5 รหัสสุดท้ายดังแสดงด้านล่าง -

<!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>

เอาต์พุต

เมื่อดำเนินการรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้ -

รูปร่างจะเคลื่อนที่ตามทิศทางที่คุณเลื่อนเคอร์เซอร์ ทำได้เช่นเดียวกันโดยใช้การควบคุมการแนบของกล้องเข้ากับฉาก

scene.activeCamera.attachControl(canvas);

ตอนนี้ให้เราคุยรายละเอียดแต่ละรูปร่าง

นี่คือบทสรุปของรูปร่างและไวยากรณ์ทั้งหมด -


var box = BABYLON.Mesh.CreateBox(
   "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var sphere = BABYLON.Mesh.CreateSphere(
   "sphere", 10.0, 10.0, scene, 
   false, BABYLON.Mesh.DEFAULTSIDE);
var plane = BABYLON.Mesh.CreatePlane(
   "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var disc = BABYLON.Mesh.CreateDisc(
   "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var cylinder = BABYLON.Mesh.CreateCylinder(
   "cylinder", 3, 3, 3, 6, 1, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var torus = BABYLON.Mesh.CreateTorus(
   "torus", 5, 1, 10, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var knot = BABYLON.Mesh.CreateTorusKnot(
   "knot", 2, 0.5, 128, 64, 2, 3, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
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);
var dashedlines = BABYLON.Mesh.CreateDashedLines(
   "dashedLines", [v1, v2, ... vn], 
   dashSize, gapSize, dashNb, scene);
var ribbon = BABYLON.Mesh.CreateRibbon(
   "ribbon", 
   [path1, path2, ..., pathn], 
   false, false, 0, 
   scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var tube = BABYLON.Mesh.CreateTube(
   "tube", 
   [V1, V2, ..., Vn], 
   radius, tesselation, 
   radiusFunction, 
   cap, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var ground = BABYLON.Mesh.CreateGround(
   "ground", 6, 6, 2, scene);
var ground = BABYLON.Mesh.CreateGroundFromHeightMap(
   "ground", "heightmap.jpg", 200, 200, 250, 0, 10, 
   scene, false, successCallback);
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);

ซีเนียร์ No	รูปร่าง	ไวยากรณ์
1	กล่อง	`var box = BABYLON.Mesh.CreateBox( "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
2	ทรงกลม	`var sphere = BABYLON.Mesh.CreateSphere( "sphere", 10.0, 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
3	เครื่องบิน	`var plane = BABYLON.Mesh.CreatePlane( "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
4	ดิสก์	`var disc = BABYLON.Mesh.CreateDisc( "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
5	กระบอกสูบ	`var cylinder = BABYLON.Mesh.CreateCylinder( "cylinder", 3, 3, 3, 6, 1, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
6	ทอรัส	`var torus = BABYLON.Mesh.CreateTorus( "torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
7	ปม	`var knot = BABYLON.Mesh.CreateTorusKnot( "knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
8	เส้นตาข่าย	`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	เส้นขีดกลาง	`var dashedlines = BABYLON.Mesh.CreateDashedLines( "dashedLines", [v1, v2, ... vn], dashSize, gapSize, dashNb, scene);`
10	ริบบิ้น	`var ribbon = BABYLON.Mesh.CreateRibbon( "ribbon", [path1, path2, ..., pathn], false, false, 0, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
11	หลอด	`var tube = BABYLON.Mesh.CreateTube( "tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
12	พื้น	`var ground = BABYLON.Mesh.CreateGround( "ground", 6, 6, 2, scene);`
13	พื้นดินจากความสูง	`var ground = BABYLON.Mesh.CreateGroundFromHeightMap( "ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);`
14	พื้นกระเบื้อง	`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);`

องค์ประกอบพื้นฐาน - ตำแหน่งการหมุนและการปรับขนาด

ในส่วนนี้เราจะเรียนรู้วิธีการจัดตำแหน่งหมุนหรือปรับขนาดองค์ประกอบที่เราเพิ่มไปจนถึงตอนนี้

เราได้สร้างกล่องทรงกลมทรงกระบอกปม ฯลฯ ตอนนี้เราจะมาดูวิธีการวางตำแหน่งขนาดและหมุนรูปร่าง

ซีเนียร์	องค์ประกอบและคำอธิบาย
1	ตำแหน่ง ด้วยการเปลี่ยนตำแหน่งตาข่ายจะเปลี่ยนจากตำแหน่งหนึ่งไปอีกตำแหน่งหนึ่ง
2	การหมุน ด้วยการหมุนตาข่ายจะถูกหมุนรอบตาข่าย
3	การปรับขนาด การปรับขนาดของตาข่ายสามารถทำได้โดยเทียบกับแกน x, y หรือ z

องค์ประกอบพื้นฐาน - การเลี้ยงดู

ด้วยการเลี้ยงดูเราจะสร้างความสัมพันธ์พ่อแม่ลูกระหว่างตาข่ายและดูว่าพวกเขามีพฤติกรรมอย่างไร ดังนั้นการเปลี่ยนแปลงใด ๆ ที่คุณนำไปใช้กับพ่อแม่ก็จะนำไปใช้กับเด็กเช่นกัน ตอนนี้ให้เราเข้าใจสิ่งเดียวกันกับการสาธิตที่แสดงด้านล่าง

การสาธิต

<!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>

เอาต์พุต

คำอธิบาย

เราได้สร้าง 3 กล่องในตาข่ายด้านบน ในการสาธิตจะใช้การปรับมาตราส่วน boxb และถูกกำหนดให้เป็นพาเรนต์ให้กับ boxc ซึ่งจะปรับขนาดเนื่องจาก boxb หลักและมาตราส่วนเดียวกัน คุณสามารถเล่นกับการสาธิตเพื่อดูว่าลิงก์ผู้ปกครอง - ลูกทำงานอย่างไร

ในการสร้างตาข่ายคุณต้องใช้แม่ของตาข่ายอื่น -

child.parent = parentmesh;

องค์ประกอบพื้นฐาน - สิ่งแวดล้อม

ตอนนี้ให้เราพูดถึงสภาพแวดล้อมของฉากในส่วนนี้ เราจะพูดถึงscene background color, ambientcolor, skyboxes, fog modeฯลฯ ในฉาก

เราได้เห็นไฟล์ scene background color is demos ซึ่งเราได้สร้างขึ้นจนถึงตอนนี้

ฉากสีพื้นหลัง

ตอนนี้ให้เราดูว่าสีพื้นหลังของฉากทำงานอย่างไร

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับสีพื้นหลังของฉาก -

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

คุณสมบัติข้างต้นจะเปลี่ยนสีพื้นหลังของฉาก

ฉากสีโดยรอบ

ตอนนี้ให้เราดูว่าสีแวดล้อมของฉากทำงานอย่างไร

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับสีแวดล้อมของฉาก -

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

AmbientColor ใช้ร่วมกับ StandardMaterialสีและพื้นผิวโดยรอบ หากไม่มี AmbientColor สำหรับฉากนั้นStandardMaterial.ambientColor และ StandardMaterial.ambientTextureไม่มีผลกระทบ StandardMaterial ambientColor / ambientTexture จะใช้งานได้เมื่อใช้ ambientColor สำหรับฉาก โดยค่าเริ่มต้นจะมีการกำหนดฉากscene.ambientColor และตั้งค่าเป็น Color3 (0, 0, 0) ซึ่งหมายความว่าไม่มีสีโดยรอบ

โหมด Scene Fog

ตอนนี้เราจะเข้าใจว่าโหมด Scene Fog ทำงานอย่างไร

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับโหมดหมอกฉาก

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

รายการต่อไปนี้ของโหมดหมอกที่มี -

BABYLON.Scene.FOGMODE_NONE - ค่าเริ่มต้นหมอกจะถูกปิดใช้งาน
BABYLON.Scene.FOGMODE_EXP - ความหนาแน่นของหมอกเป็นไปตามฟังก์ชันเลขชี้กำลัง
BABYLON.Scene.FOGMODE_EXP2 - เหมือนกับข้างบน แต่เร็วกว่า
BABYLON.Scene.FOGMODE_LINEAR - ความหนาแน่นของหมอกเป็นไปตามฟังก์ชันเชิงเส้น

หากกำหนดโหมดหมอก EXP หรือ EXP2 คุณสามารถกำหนดความหนาแน่นได้ดังนี้ -

scene.fogDensity = 0.01;

หากโหมดหมอกคือ LINEAR คุณสามารถกำหนดตำแหน่งที่หมอกเริ่มต้นและสิ้นสุดได้ดังนี้ -

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

เพื่อให้สีหมอกดำเนินการตามรหัสต่อไปนี้ -

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

Skybox

Skybox เป็นวิธีการสร้างฉากหลังในเกมที่ทำให้ฉากดูสมจริง มันเป็นมากกว่ากระดาษห่อรอบหน้าจอของคุณซึ่งครอบคลุมพื้นผิวที่ใช้สำหรับวัสดุ เลือกภาพของคุณอย่างเหมาะสมเพื่อให้ดูสมจริงสำหรับฉากที่คุณต้องการสร้าง ในการสร้าง skybox คุณต้องสร้างกล่องและใช้วัสดุกับมัน เราจะพูดถึงเนื้อหาต่างๆโดยละเอียดในบทต่อไป

ตอนนี้เราจะดูวิธีสร้าง skybox โดยใช้กล่องและวัสดุ

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

เราจะสร้างกล่องขนาด 100 เพื่อให้ครอบคลุมฉากทั้งหมด เราจะเริ่มด้วยการให้วัสดุในกล่องซึ่งทำได้ดังนี้ -

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

สำหรับวัสดุนี้เราจะกำหนดคุณสมบัติ

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

เราต้องใช้พื้นผิวสะท้อนซึ่งโดยพื้นฐานแล้วจะใช้ในการสร้างกระจกเหมือนวัสดุ คุณสมบัติพื้นผิวสะท้อนใช้ CubeTexture ซึ่งใช้ภาพเป็นอินพุต เนื่องจากคิวบ์มี 6 ใบหน้ารูปภาพที่จำเป็นสำหรับสกายบ็อกซ์จึงต้องเป็น 6 เช่นภายในจึงต้องจัดเก็บเป็น skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz ภาพที่ใช้สำหรับ skybox วางอยู่ด้านล่าง เป็นใบหน้าของลูกบาศก์ทั้งหกด้าน เมื่อคุณใช้พื้นผิวกับรูปร่างจะให้รายละเอียดของภาพที่ใช้และทำให้ฉากดูสมจริง เราใช้โหมดพิกัดเป็น SKYBOX_MODE ดังที่แสดงด้านล่าง -

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

มีคุณสมบัติอื่น ๆ ที่ใช้สำหรับวัสดุเช่น backfaceCulling, diffuseColor, specularColor, disabledLighting เป็นต้นคุณสมบัติจะอธิบายโดยละเอียดในส่วนวัสดุ

ในการสาธิตเราจะแสดงฉากสภาพแวดล้อมที่สร้างขึ้นโดยใช้สกายบ็อกซ์ทรงกลมที่หมุนในฉากและเครื่องบินที่เคลื่อนที่ไปรอบ ๆ มีการใช้หมอกกับฉากซึ่งคุณจะสังเกตเห็นได้เมื่อหมุน

การสาธิตแสดงฉากสิ่งแวดล้อม

<!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>

เอาต์พุต

คำอธิบาย

ในตัวอย่างข้างต้นเราใช้รหัสต่อไปนี้สำหรับหมอก -

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 - ที่นี่ความหนาแน่นของหมอกเป็นไปตามฟังก์ชันเลขชี้กำลัง
scene.registerBeforeRender = ด้วยเหตุนี้ความหนาแน่นของหมอกจึงเปลี่ยนไปดังนี้ -

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

ค่าของอัลฟาจะเพิ่มขึ้นเรื่อย ๆ โดย 0.02 เมื่อเป็นแบบวนซ้ำเช่นเดียวกับในฟังก์ชันด้านบน

ที่นี่เราได้เพิ่มภาพสไปรต์ระนาบและเปลี่ยนตำแหน่งด้วยไฟล์ scene.registerBeforeRender ฟังก์ชันดังต่อไปนี้ -

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

เราจะเปลี่ยนแกน x ของระนาบและรีเซ็ตเมื่อถึงมากกว่า 50

นอกจากนี้ทรงกลมยังหมุนตามแกน y สิ่งนี้แสดงในตัวอย่างด้านบนค่านี้เปลี่ยนโดยใช้ sphere.rotation.y

พื้นผิวที่ใช้สำหรับทรงกลมคือ - images/tshphere.jpg. รูปภาพจะถูกเก็บไว้ในรูปภาพ / โฟลเดอร์ในเครื่องและวางไว้ด้านล่างเพื่อใช้อ้างอิง คุณสามารถดาวน์โหลดรูปภาพที่คุณต้องการและใช้ในลิงค์สาธิต

เราต้องการภาพหกภาพสำหรับลูกบาศก์ ภาพจะถูกเก็บไว้ในโฟลเดอร์ images / cubetexture / คุณสามารถดาวน์โหลดภาพใดก็ได้ที่คุณต้องการ แต่เมื่อคุณบันทึกไว้ให้บันทึกเป็น nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz โปรดทราบว่าภาพที่เลือกควรอยู่ในลำดับเพื่อให้พื้นหลังดูสมจริงเหมือนกับภาพที่แสดงสำหรับ skybox

ภาพที่ใช้ในการทำสกายบ็อกซ์มีดังนี้ - images/cubetexture/skybox

skybox_nx