setup environment
pnpm create vite
➜ ~ pnpm create vite
.local/share/pnpm/store/v3/tmp/dlx-22635 | +1 +
.local/share/pnpm/store/v3/tmp/dlx-22635 | Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ Project name: … village
? Select a framework: › - Use arrow-keys. Return to submit.
❯ Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others
➜ ~ pnpm create vite
.local/share/pnpm/store/v3/tmp/dlx-22835 | +1 +
.local/share/pnpm/store/v3/tmp/dlx-22835 | Progress: resolved 1, reused 1, downloaded 0, added 1, done
✔ Project name: … oooo
✔ Select a framework: › Vanilla
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
JavaScript
ref: doc.babylonjs.com/setup/frame… ES6 usage
pnpm i @babylonjs/core @babylonjs/materials @babylonjs/loaders @babylonjs/post-processes @babylonjs/procedural-textures @babylonjs/serializers @babylonjs/gui @babylonjs/inspector
// src/utils/index.ts
import { Engine, Scene } from "@babylonjs/core";
export const createDefaultEngine = (canvas: HTMLCanvasElement) => {
return new Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true,
disableWebGL2Support: false,
// useHighPrecisionShaderLanguage: true,
// textureSize: 2048,
// maxTextureSize: 2048,
// deterministicLockstep: true,
// lockstepMaxSteps: 1,
// lockstepMaxIterations: 1,
// lockstepDeltaTime: 1 / 60,
});
};
export const startRenderLoop = (engine: Engine, sceneToRender: Scene) => {
engine.runRenderLoop(function () {
if (sceneToRender && sceneToRender.activeCamera) {
sceneToRender.render();
}
});
};
过程：
- 获取 canvas
- 创建 engine 实例对象
- 创建 scene 场景实例对象
- 创建 cameral 相机对象 （此相机使的场景可以旋转）
- 创建 light 实例对象
- 创建 box mesh 实例
- 启动渲染循环
// src/demo-01/index.ts
import {
Scene,
ArcRotateCamera,
HemisphericLight,
MeshBuilder,
StandardMaterial,
Color3,
Vector3,
Mesh,
Texture,
} from "@babylonjs/core";
import { createDefaultEngine, startRenderLoop } from "../utils";
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = createDefaultEngine(canvas);
const scene = new Scene(engine);
const cameral = new ArcRotateCamera(
"camera",
-Math.PI / 2,
Math.PI / 2.5,
3,
Vector3.Zero(),
scene
);
cameral.attachControl(engine.getRenderingCanvas(), true);
const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
const box = MeshBuilder.CreateBox("box", {}, scene);
startRenderLoop(engine, scene)
window.addEventListener("resize", function () {
engine.resize();
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
#canvasZone {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
// src/main.ts
import "./style.css";
///
import "./demo-01";
➜ babylon-village tree -I node_modules
.
├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
│ └── vite.svg
├── src
│ ├── demo-01
│ │ └── index.ts
│ ├── main.ts
│ ├── style.css
│ ├── utils
│ │ └── index.ts
│ └── vite-env.d.ts
└── tsconfig.json
npm run dev
