Creating a Game using Vite, BabylonJS, and TypeScript Part One: A Basic Scene with Objects, a Light, and a Camera

Full Tutorial at: https://www.willieliwa.com/posts/projectsetup

December 31, 2022

Script, Vite, and BabylonJS

If you need a fast, reliable, and lightweight way to create 3D browser games you've landed on the right post. With BabylonJS, a powerful 3D engine; Vite, one of the latest fast and lightweight build tools; and TypeScript, arguably a better version of JavaScript, we can create decent-sized WebGL games with realistic graphics, physics, skeletal animation, and post-processing effects just to name a few of the features.

Let's get right into it! ----> Full Tutorial

Here's an outline and summary of what you will be doing:

1. Creating a Vite Project

They've made it nice and straightforward to install Vite with a helpful CLI:

Run the following commands:

Pick the options Vanilla and TypeScript for this project. Replace devlon with the name of your game.

npm create vite@latest devlon cd devlon npm install 

Your generated project folder should look like this:

your-awesome-game-name/ ├── index.html ├── node_modules ├── package-lock.json ├── package.json ├── public  │   └── vite.svg ├── src │   ├── counter.ts │   ├── main.ts │   ├── style.css │   ├── typescript.svg │   └── vite-env.d.ts └── tsconfig.json 

You can test it out right now by running:

npm run dev 

We can continue on to our next step if this runs without any errors.

2. Installing BabylonJS

Run the following command to install babylonjs-core

npm install --save babylon 

We only need BabyonJS core for now, but we install the loaders and GUI package in another tutorial in this series.

3. Configure Vite and TypeScript

4. Creating the Game class and Other Scripts

5. Creating the Scene

6. Done! Next tutorial coming soon at --> www.wilieliwa.com