58 lines
974 B
Markdown
58 lines
974 B
Markdown
# 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();
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
### 加载模型
|
|
|