babylon First Scene and Model
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里面加,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)