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
pnpm i @babylonjs/core @babylonjs/materials @babylonjs/loaders @babylonjs/post-processes @babylonjs/procedural-textures @babylonjs/serializers @babylonjs/gui @babylonjs/inspector
➜ build-a-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
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>
// import './demo-01'
import './demo-01'
// src/utils/index.ts
import { Engine, Scene } from '@babylonjs/core'
export const createApp = (createScene: (canvas: HTMLCanvasElement, engine: Engine) => Scene) => {
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement
const engine = new Engine(canvas, true)
const scene = createScene(canvas, engine);
const app = {
run: () => {
engine.runRenderLoop(() => {
scene.render()
})
},
}
window.addEventListener("resize", function () {
engine.resize();
});
return app;
}
// src/demo-01/index.ts
import { ArcRotateCamera, HemisphericLight, MeshBuilder, Scene, Vector3 } from "@babylonjs/core";
import { createApp } from "../utils";
const app = createApp((canvas, engine) => {
const scene = new Scene(engine);
const camera = new ArcRotateCamera("camera", -Math.PI/2, Math.PI/2.5, 15, Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new HemisphericLight('light', new Vector3(1, 1, 0), scene);
// customize your scene here
const ground = MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);
return scene;
})
app.run();
demo template
src/demo-00/index.ts
import { ArcRotateCamera, HemisphericLight, Scene, Vector3 } from "@babylonjs/core";
import { createApp } from "../utils";
const app = createApp((canvas, engine) => {
const scene = new Scene(engine);
const camera = new ArcRotateCamera("camera", -Math.PI/2, Math.PI/2.5, 15, Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new HemisphericLight('light', new Vector3(1, 1, 0), scene);
// customize your scene here
return scene;
})
yarn dev
visit: http://localhost:5173/
you got it
