First Scene and Model
https://doc.babylonjs.com/features/introductionToFeatures/chap1/first_scene
1)安装vite,选Vanilla和typescript

npm create vite@latest
cd xxx
npm i babylonjs --save
npm i
npm run dev


2)改写里面的index.html里面加<canvas></canvas>,main.ts

const canvas = document.querySelector<HTMLCanvasElement>('canvas')!
new BaseScene(canvas);

新建BaseScene.ts代码

import { ArcRotateCamera, Engine, HemisphericLight, MeshBuilder, Scene, Vector3 } from "babylonjs";

export default class BaseScene {
    engine: Engine;
    scene: Scene;
    constructor(private readonly canvas: HTMLCanvasElement) {
        this.engine = new Engine(canvas);
        this.scene = this.CreateScene();

        this.engine.runRenderLoop(()=>{
            this.scene.render();
        })
    }

    CreateScene(): Scene {
        const scene = new Scene(this.engine);
        const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new Vector3(0, 0, 0), scene);
        camera.attachControl(this.canvas, true);
        
        const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
        const box = MeshBuilder.CreateBox("box", {}, scene)
        return scene;
    }
}

3)运行npm run dev成功实时查看。
4)

标签: none

添加新评论