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