组成

我们先简单的了解一下一个3D场景是由哪些元素组成的。

  1. 引擎Engine：（必需）负责了与底层WebGL和Audio连接
  2. 场景Scene：（必需）为所有灯光、相机、模型等提供显示场景
  3. 相机Camera：（必需）是用户从不同角度观察场景的工具
  4. 灯光Light：模拟各种真实世界的光线
  5. 模型Mesh：在场景中呈现的各种模型，包括立体模型、平面模型和线
  6. 材质Material：用于改变模型表面呈现的颜色、图片、纹理等效果
  7. 动画Animation：使场景中的元素可以动态改变状态，元素包括相机、灯光、模型、材质等

导入引擎

首先，我们要从babylonjs中导入Engine，并且将指定的canvas元素作为3D场景的容器。

  1. <script setup lang="ts">
  2. import { onMounted } from '@vue/runtime-core';
  3. import { Engine } from 'babylonjs';
  5. onMounted(() => {
  6.   const canvas = document.querySelector<HTMLCanvasElement>('#container');
  7.   const engine = new Engine(canvas);
  8. });
  9. </script>

创建并渲染场景

从babylonjs中导入Scene，创建一个新的场景，并且执行engine.runRenderLoop，让引擎在每一帧中去渲染scene。同时还需要创建一个相机，有了相机我们才能看到场景里的东西，如果没有相机控制台会报Uncaught Error: No camera defined的错。

  1. <script setup lang="ts">
  2. import { onMounted } from '@vue/runtime-core';
  3. import { ArcRotateCamera, Engine, Scene, Vector3 } from 'babylonjs';
  5. onMounted(() => {
  6.   const canvas = document.querySelector<HTMLCanvasElement>('#container');
  7.   const engine = new Engine(canvas);
  8.   const scene = createScene(engine);
  9.   engine.runRenderLoop(() => {
  10.     scene.render();    
  11.   });
  12. });
  14. const createScene = (engine: Engine) => {
  15.   /** 创建场景 */
  16.   const scene = new Scene(engine);
  17.   /** end */
  19.   /** 创建相机 */
  20.   const camera = new ArcRotateCamera('camera', 0, 0, 10, Vector3.Zero(), scene);
  21.   camera.attachControl(true);
  22.   /** end */
  24.   return scene;
  25. };
  27. </script>

其中，ArcRotateCamera构造函数的参数依次代表：

  1. name: 相当于我们平时理解的id或者key，全局唯一
  2. alpha: 初始水平方向旋转弧度
  3. beta: 初始垂直方向旋转弧度
  4. radius: 距离旋转中心点的半径
  5. target: 旋转中心坐标
  6. scene: 所在场景

创建完相机后，需要调用attachControl方法在画布上附加相机的控制事件。老版本中这个方法需要传入canvas参数指定画布，新版本移除了这个参数，只需要传入一个布尔值指定是否阻止事件冒泡即可。

现在，我们的画布变成了深蓝色，说明场景已经被正确的创建并渲染了。如果想把场景背景色设置成灰色，只需要设置scene的clearColor属性即可：
scene.clearColor = Color4.FromColor3(Color3.Gray());

下面我们介绍如何创建模型和灯光。