babylon.js-2：基本元素介绍
该章节主要介绍 BABYLON 的基本元素，其旨意是让读者对 BABYLON 有一个整体的认识，然后在后续的章节中，逐步深入。
文章目录
- babylon.js-2：基本元素介绍
- 1. 核心库
- 2. 画布
- 3. 引擎
- 4. 场景
- 5. 灯光
- 6. 相机
- 7. 网格
- 8. 效果展示 & 交互
- 9. 材质
- 10. 纹理
- 11. 动画
- 总结
1. 核心库
第一步，引入核心库：
<!-- 引入核心库 -->
<head><script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
2. 画布
第二步，定义一个 canvas 画布：
<!-- 定义画布 -->
<body><canvas id="renderCanvas"></canvas>
</body>
// 获取画布
var canvas = document.getElementById("renderCanvas");
3. 引擎
第三步，创建一个引擎：
// 创建引擎
var engine = new BABYLON.Engine(canvas, true);
-
参数1 - canvasOrContext：画布
-
参数2 - antialias：是否开启抗锯齿（默认关闭）
4. 场景
第四步，创建一个场景：
// 创建场景
var scene = new BABYLON.Scene(engine);
- 参数1 - engine：定义用于渲染此场景的引擎
5. 灯光
第五步，创建一个灯光：
// 创建灯光
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
- 参数1 - name：灯光名称
- 参数2 - direction：灯光位置
- 参数3 - scene：灯光所在场景
说明：
new BABYLON.Vector3(0, 1, 0)表示灯光位置在场景的上方，等价于BABYLON.Vector3.Up()。
6. 相机
第六步，创建一个相机：
// 创建相机
var camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 3, Math.PI / 3, 10, BABYLON.Vector3.Zero(), scene);
- 参数1 - name：相机名称
- 参数2 - alpha：相机水平位置
- 参数3 - beta：相机垂直位置
- 参数4 - radius：相机距离
- 参数5 - target：相机目标点
- 参数6 - scene：相机所在场景
说明：
BABYLON.Vector3.Zero()表示相机目标点在场景的原点，等价于new BABYLON.Vector3(0,0,0)。
相机位置示意图
7. 网格
第七步，创建一个网格：
// 创建网格
var box = BABYLON.MeshBuilder.CreateBox("box",{ size: 1 }, scene);
- 参数1 - name：网格名称
- 参数2 - options：网格参数
- 参数3 - scene：网格所在场景
说明：
{ size: 1 }表示网格大小为 1。也可以写成{ width: 1, height: 1, depth: 1 }。
8. 效果展示 & 交互
第八步，展示效果：
到了这一步，我们已经创建了一个基本的场景，接下来，我们需要展示这个场景：
-
安装
Live Server插件
-
右键点击
html文件，选择“Open with Five Server”在浏览器中打开 -
如果你看到一个空白页面以及控制台无明显报错，说明你已经成功了！你只需要添加这段代码：
// 启动渲染循环 engine.runRenderLoop(function () {// 渲染场景scene.render(); });engine.runRenderLoop是Engine对象的一个方法，它的作用是启动一个渲染循环。这个渲染循环是一个持续运行的函数，在每一个帧（frame）中都会被调用。- 在浏览器环境下，这个循环通常与浏览器的
requestAnimationFrame机制相结合，以确保在每一帧中更新并渲染 3D 场景，从而实现流畅的动画效果。 - 如果你想停止渲染循环，可以使用
engine.stopRenderLoop方法。
-
设置页面及画布的大小
<style>html,body {overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0;}#renderCanvas {width: 100%;height: 100%;touch-action: none;} </style> -
添加相机交互效果
// 相机交互 camera.attachControl(canvas, true);- 如果你想取消用户对相机的控制，可以使用
camera.detachControl; 方法，它会解除相机与指定画布的关联，用户将无法再通过鼠标和键盘控制相机。
🎉🎉🎉 恭喜你完成了自己的第一个 3D 场景！回顾 babylon.js-1：入门篇
- 如果你想取消用户对相机的控制，可以使用
9. 材质
第九步，创建一个材质：
// 创建材质
var material = new BABYLON.StandardMaterial("material", scene);
给方才创建的网格添加红色材质显得喜庆一些。
// 创建材质
material.diffuseColor = new BABYLON.Color3(1, 0, 0);
box.material = material;
说明：
new BABYLON.Color3(1, 0, 0)表示红色，等同于BABYLON.Color3.Red()。
颜色的拓展：
// 注意：它们是不需要 new , 因为它们是静态的
BABYLON.Color3.Random(); // 随机颜色
BABYLON.Color3.Red(); // 红色
当前节点 javascript 核心代码：
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas);
const scene = new BABYLON.Scene(engine);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 3, Math.PI / 3, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const box = BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);
const material = new BABYLON.StandardMaterial('material', scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);
box.material = material;engine.runRenderLoop(function () {scene.render();
});
10. 纹理
第十步，创建一个纹理：
// 创建纹理
var texture = new BABYLON.Texture('./crate.png', scene);
- 参数1 - url：纹理路径
- 参数2 - scene：纹理所在场景
// 给网格添加纹理
material.diffuseTexture = texture;
box.material = material;
当前节点 javascript 核心代码：
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas);
const scene = new BABYLON.Scene(engine);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
const camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 3, Math.PI / 3, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const box = BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);
const material = new BABYLON.StandardMaterial('material', scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);// 创建纹理
var texture = new BABYLON.Texture('./crate.png', scene);
material.diffuseTexture = texture;// 给网格盒子添加纹理效果
box.material = material;engine.runRenderLoop(function () {scene.render();
});
箱子素材
11. 动画
第十一步，创建一个动画：
// 创建动画
var animation = new BABYLON.Animation('animation', 'rotation.y', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);
- 参数1 - name：动画名称
- 参数2 - targetProperty：要设置动画的属性
- 参数3 - framePerSecond：动画帧率
- 参数4 - dataType：动画类型
- 参数5 - loopMode：动画循环模式
说明：
rotation.y表示旋转的 Y 轴，即绕 Y 轴旋转。BABYLON.Animation.ANIMATIONTYPE_FLOAT表示动画类型为浮点数。BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE表示动画循环模式为相对循环。
设置动画关键帧：
// 定义动画关键帧
var keys = [];
keys.push({frame: 0,value: 0
});
keys.push({frame: 150,value: Math.PI * 2
});
// 添加关键帧
animation.setKeys(keys);
// 给盒子添加动画
box.animations = [animation];
// 播放动画
scene.beginAnimation(box, 0, 150, true);
说明：
-
除了
scene.beginAnimation方法外，还可使用beginDirectAnimation方法来开始动画。 -
beginDirectAnimation的使用方式：scene.beginDirectAnimation(box, [animation], 0, 150, true); -
可以使用
scene.stopAnimation方法来停止动画。
setKeys
setKeys(values: IAnimationKey[], dontClone?: boolean): void
- 参数1 - values：动画关键帧数组
- 参数2 - dontClone：是否克隆(默认值为false)
beginAnimation
beginAnimation(target: any,from: number,to: number,loop?: boolean
): Animatable
- 参数1 - target：动画目标
- 参数2 - from：动画开始帧
- 参数3 - to：动画结束帧
- 参数4 - loop：是否循环(默认值为false)
总结
最后，来看看整体代码实现的效果！
