讓我們以**The Very First Step範例當開場**，先大致理解構築3D 世界的基礎概念，我們在範例中的最後一步step 5 結束時會得到的程式碼長這個樣子：
var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 10, BABYLON.Vector3.Zero(), scene);
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
// Our built-in 'ground' shape.
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
let groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
ground.material = groundMaterial;
let groundTexture = new BABYLON.Texture(Assets.textures.checkerboard_basecolor_png.path, scene);
groundMaterial.diffuseColor = BABYLON.Color3.Red();
ground.material.diffuseTexture = groundTexture;
BABYLON.ImportMeshAsync(Assets.meshes.Yeti.rootUrl + Assets.meshes.Yeti.filename, scene).then(function({meshes}){
meshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
});
return scene;
};
首先我們看到他先要createScene，這是個於電腦圖學中經典的場景圖(Scene Graph)。如果有3D 開發經驗，可能在Three.js, Unity 也看到過。因為場景圖是用來組織3D 世界物件的樹狀結構。
Engine (引擎)：與瀏覽器的WebGL/WebGPU 溝通，並將 3D 場景實際畫到網頁的 <canvas> 元素上。
場景 (Scene) 則是這棵樹的根節點 (root node)，他像是個巨大的片場，所有的其他物件(攝影機、燈光、3D 模型)都長在這個場景上。官網有更多場景的說明。如果要拿html來比喻，宣告 scene，就如同在開發 HTML 時宣告 <body> 標籤一樣重要。
剛剛提到場景中會有的常見物件如攝影機、燈光、3D 模型，在構築3D 世界的時候，這三項可說是組成一個場景的常見基本元素：
攝影機(Camera)：我們建構3D世界非常需要攝影機來知道目前的視角在哪裡，就如同片場中的攝影機，整個片場很大但只會看到從攝影機看出去的視角、視野。常用的有：
| 中文名稱 | 英文名稱 (Babylon.js) | 比喻 | 主要用途 |
|---|---|---|---|
| 通用攝影機 | UniversalCamera |
第一人稱主角 | 自由漫遊、第一人稱體驗 |
| 弧形旋轉攝影機 | ArcRotateCamera |
衛星、模型觀察者 | 3D 模型展示、產品預覽、編輯器 |
| 跟隨攝影機 | FollowCamera |
跟拍攝影師 | 第三人稱遊戲、跟隨特定物件 |
| WebXR 攝影機 | WebXRCamera |
使用者的頭 | VR / AR 體驗 |
對於初學者來說，ArcRotateCamera 是最容易上手且功能強大的攝影機，適合用來學習和搭建大多數的場景。
燈光(Light)：照明與物體的明暗就靠燈光。就如同片場的燈光，有分如太陽光的平行光；或是如同一般光源的點光源。也有不同顏色的光。常見的光源有這些：
| 燈光類型 | 比喻 | Babylon.js 類別 | 主要用途 |
|---|---|---|---|
| 半球光 | 環境光/天空光 | BABYLON.HemisphericLight |
基礎環境光，提亮場景 |
| 平行光 | 太陽光 | BABYLON.DirectionalLight |
模擬太陽光，產生平行陰影 |
| 點光源 | 燈泡 | BABYLON.PointLight |
模擬燈泡、火焰等點狀光源 |
| 聚光燈 | 手電筒 | BABYLON.SpotLight |
模擬手電筒、舞台燈等聚焦光源 |
3D 模型(Mesh)：我們在場景中的所有看的見的物件就是各種3D 模型**。主流的模型大多會以多邊形建模 (Polygon Modeling)的方式建，特別是在遊戲和即時渲染領域。任何複雜的物體（比如一隻手、一輛車）都可以被簡化為由許多微小的三角形拼接而成。這些由頂點 (Vertices)、邊 (Edges) 和 面 (Faces) 組成的集合，稱為網格 (Mesh)**也就是模型。
Mesh 就像演員或道具，是構成3D 世界的主體。模型有不同的形狀、材質和顏色，載入模型後，最基本、最常見的操作是變換 position (位置)、rotation (旋轉) 和 scaling (縮放)，來改變大小和位置。模型的格式大多會是glTF。babylon.js 有很多內建的基礎模型，像是
| 中文名稱 | 英文名稱 | 創建方法 |
|---|---|---|
| 方塊/立方體 | Box | CreateBox |
| 球體 | Sphere | CreateSphere |
| 平面 | Plane | CreatePlane |
| 地面 | Ground | CreateGround |
| 圓柱體 | Cylinder | CreateCylinder |
| 圓錐體 | Cone | CreateCylinder (將頂部直徑設為0) |
| 環狀體 | Torus | CreateTorus |
| 繩結體 | TorusKnot | CreateTorusKnot |
| 線條 | Lines | CreateLines |
| 虛線 | DashedLines | CreateDashedLines |
| 帶狀體 | Ribbon | CreateRibbon |
| 管狀體 | Tube | CreateTube |
| 二十面體球 | IcoSphere | CreateIcoSphere |
| 多邊形 | Polygon | CreatePolygon |
讓我們回到程式碼再解讀一次，就能看到的宣告 scene、 camera、 light 分別對應到場景、攝影機、燈光。而**ground** 對應到內建的基礎模型(Mesh)當成了地板，並賦予他顏色和材質。最後引入雪怪這個Mesh，Vector3是指三維向量，0.1是原尺寸10%，所以是長寬高都是10%的雪怪物件出現在畫面中。
現在了解一個場景該有的樣子，就可以接續官網的教學Features。
iThome鐵人賽
看影片追技術
看更多