babylonjs Project Template

Babylon Template

Project template to create simple babylon.js application using vite build tool in typescript

Template Repository

Project Setup

Create vite vanilla-ts project

npm create vite@latest

Babylon Setup

Installation

npm install --save babylonjs

Import

import * as BABYLON from "babylonjs";

Optional

Setup ESLint and tailwind as per instruction given here.

Scaffold cleanup

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;

Scene

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();

run

npm install
npm run dev