Babylon.js学习之路《三、创建你的第一个 3D 场景：立方体、球体与平面》
文章目录
- 1. 引言：从零构建一个 3D 场景
- 1.1 目标与成果预览
- 1.2 前置条件
- 2. 初始化 Babylon.js 场景
- 2.1 创建 HTML 骨架
- 2.2 初始化引擎与场景
- 3. 创建基础几何体
- 3.1 立方体（Box）
- 3.2 球体（Sphere）
- 3.3 平面（Plane）
- 3.4 其他基础几何体（快速预览）
- 4. 调整物体属性
- 4.1 位置、旋转与缩放
- 4.2 父子层级关系
- 5. 总结与下一章预告
- 5.1 关键知识点回顾
- 5.2 下一章预告
1. 引言：从零构建一个 3D 场景
上一章简单介绍了项目中如何引入Babylon.js，并且举例创建了一个正方形的代码。
这一章详细介绍一下Babylon创建不同形状物体的功能。
1.1 目标与成果预览
- 最终效果：在浏览器中展示包含立方体、球体、平面的交互式场景，可旋转/缩放视角。
- 核心知识点：场景初始化、几何体创建、坐标系理解、基础交互。
1.2 前置条件
- 已完成开发环境配置（参考前一篇文章）。
- 基础 HTML/JavaScript 语法熟悉。
2. 初始化 Babylon.js 场景
2.1 创建 HTML 骨架
<!DOCTYPE html><html><head><title>第一个 3D 场景</title><script src="https://cdn.babylonjs.com/babylon.js"></script></head><body><canvas id="renderCanvas"></canvas><script src="app.js"></script></body></html>
2.2 初始化引擎与场景
// app.jsconst canvas = document.getElementById("renderCanvas");const engine = new BABYLON.Engine(canvas, true); // 初始化引擎const createScene = () => {const scene = new BABYLON.Scene(engine);// 添加相机const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI/2, Math.PI/2.5, 10, new BABYLON.Vector3(0, 0, 0), scene);camera.attachControl(canvas, true);// 添加光源const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);return scene;};const scene = createScene();engine.runRenderLoop(() => scene.render());
此时成功创建了Babylon场景，由于没有任何模型，此时场景看起来空空荡荡的。
3. 创建基础几何体
3.1 立方体（Box）
- 代码实现：
const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2, // 边长height: 3, // 单独设置高度（覆盖 size）faceColors: [ // 每个面的颜色（可选）new BABYLON.Color4(1,0,0,1), // 前面红色new BABYLON.Color4(0,1,0,1), // 背面绿色// ... 其他面]}, scene);box.position = new BABYLON.Vector3(-3, 0, 0); // 设置位置
- 关键参数解析：
size：统一尺寸，或通过width/height/depth单独设置。faceColors：为立方体每个面指定颜色（需启用hasVertexAlpha）。
添加创建长方体的代码后，场景中成功添加一个符合我们参数的模型：边长为2，高度为3，六个面包含多个颜色。
3.2 球体（Sphere）
- 代码实现：
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2, // 直径segments: 32 // 细分面数（影响光滑度）}, scene);sphere.position = new BABYLON.Vector3(0, 0, 0);
- 关键参数解析：
segments：值越大球体越光滑，性能消耗越高。
与长方体的代码相似，通过BABYLON.MeshBuilder.CreateSphere函数成功添加了一个球体，属性可以配置
3.3 平面（Plane）
- 代码实现：
const plane = BABYLON.MeshBuilder.CreatePlane("plane", { size: 5, sideOrientation: BABYLON.Mesh.DOUBLESIDE // 双面渲染}, scene);plane.position = new BABYLON.Vector3(3, 0, 0);plane.rotation.x = Math.PI/2; // 旋转为水平面
- 关键参数解析：
sideOrientation：默认为单面渲染，设置为DOUBLESIDE可双面可见。
3.4 其他基础几何体（快速预览）
- 圆柱体（
CreateCylinder）、圆锥体（CreateCylinder调整参数）、地面（CreateGround）。 - 这里不再赘述，可以通过Babylon提供的API自己动手尝试，亲自动手实践才能印象更深。
4. 调整物体属性
4.1 位置、旋转与缩放
- 坐标系系统：右手坐标系（X右，Y上，Z向前）。
- 代码操作：
box.position = new BABYLON.Vector3(2, 1, -3); // 位置box.rotation = new BABYLON.Vector3(0, Math.PI/4, 0); // 弧度制旋转box.scaling = new BABYLON.Vector3(1, 2, 1); // 缩放
4.2 父子层级关系
- 将物体附加到另一个物体，实现联动：
sphere.parent = box; // 球体随立方体移动/旋转
此时球体的中心会自动定位到长方体的中心，两者会联动
5. 总结与下一章预告
5.1 关键知识点回顾
- 立方体、球体、平面创建
- 调整物体的位置、旋转与缩放
- 父子层级关系
5.2 下一章预告
- 《Babylon.js 中的相机（Camera）与视角控制》：详解自由相机、弧形旋转相机、跟随相机等类型及交互配置。