文章目录
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.js
const 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）与视角控制》：详解自由相机、弧形旋转相机、跟随相机等类型及交互配置。