Project template to create simple babylon.js application using vite build tool in typescript
Create vite vanilla-ts project
npm create vite@latest
Installation
npm install --save babylonjs
Import
import * as BABYLON from 'babylonjs'
Setup ESLint and tailwind as per instruction given here.
Cleanup default vite project code
Remove all existing style and make page ready for fullscreen canvas
- style.css
html, body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
Remove existing HTML and add canvas element.
- main.ts
import './style.css'
const app = document.querySelector<HTMLDivElement>('#app')
if (app) {
app.innerHTML = `
<canvas id="renderCanvas" touch-action="none"></canvas>
`
}
create a new file for scene and make sure the canvas is fullscreen
- firstscene.ts
canvas.width = window.innerWidth
canvas.height = window.innerHeight
Use one of the sample app or create your own in the firstscene.ts
file
https://doc.babylonjs.com/start/chap1/first_app
load the scene in root application
- main.ts
import loadscene from './firstscene'
loadscene()
npm install
npm run dev