# Babylon js



## depends

```bash
vue 3
babylonjs 5
```



##  install

```bash
yarn add @babylonjs/core @babylonjs/loaders
```



## 三核心

- 场景
- 摄像头
- 光

一般使用babylonjs 分为 3个步骤

```js
// 1 初始化 engine
var canvas = document.getElementById('renderCanvas')
let engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });

// 2 添加 场景、灯光、摄像头
var createScene = function () {
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 0, 1), scene);
    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    return scene;
}
var scene = createScene();

// 3 循环渲染
engine.runRenderLoop(function () {
    scene.render();
});

```



### 加载模型