mynote/babylonjs/start.md

Babylon js

depends

vue 3
babylonjs 5

install

yarn add @babylonjs/core @babylonjs/loaders

三核心

• 场景
• 摄像头
• 光

一般使用babylonjs 分为 3个步骤

// 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();
});

加载模型