init commit

.gitignore

@@ -0,0 +1,8 @@
+# build folder
+/dist
+
+# npm packages
+/node_modules
+
+#npm package lock file
+package-lock.json

.prettierignore

@@ -0,0 +1 @@
+*.md

README.md

@@ -0,0 +1,42 @@
+# babylonjs-typescript-template
+
+<p align="center">
+ <img height="150" width="300" src="./doc/readme/babylonjs_logo.png" />
+</p>
+
+<p align="center">  
+  A BabylonJS barebones in typescript using Ammo.js for a physics engine. 
+<p>
+
+<p align="center">
+ <img height="540" width="810" src="./doc/readme/babylonjs_live_view.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);" />
+</p>
+
+
+After clone the repository, install the npm packages
+
+```
+npm i
+```
+
+After installing the dependencies, run the server using
+
+```
+nodemon
+```
+
+---
+
+
+write all your babylonjs code within the `src > public > typescript` directory.<br>
+nodemon will automatically build, pack, and refresh nodejs.
+
+#### Tech used:
+- BabylonJS
+- Ammo.js
+- express
+- ejs
+- gulp
+- webback
+
+// TODO: add more stuffs to this

gulpfile.js

@@ -0,0 +1,56 @@
+var gulp = require("gulp");
+var ts = require("gulp-typescript");
+var tsProject = ts.createProject("tsconfig.json");
+var del = require("del");
+
+// Task which would transpile typescript to javascript
+gulp.task("typescript", function () {
+  return tsProject.src().pipe(tsProject()).js.pipe(gulp.dest("dist"));
+});
+
+// Task which would delete the old dist directory if present
+gulp.task("build-clean", function () {
+  return del(["./dist"]);
+});
+
+// Task which would just create a copy of the current views directory in dist directory
+gulp.task("views", function () {
+  return gulp.src("./src/views/**/*.ejs").pipe(gulp.dest("./dist/views"));
+});
+
+// Task which would just create a copy of the current images directory in dist directory
+gulp.task("images", function () {
+  return gulp
+    .src("./src/public/images/**/*")
+    .pipe(gulp.dest("./dist/public/images"));
+});
+
+// Task which would just create a copy of the current images directory in dist directory
+gulp.task("stylesheets", function () {
+  return gulp
+    .src("./src/public/stylesheets/**/*")
+    .pipe(gulp.dest("./dist/public/stylesheets"));
+});
+
+// Task which would just create a copy of the current static assets directory in dist directory
+gulp.task("assets", function () {
+  return gulp
+    .src("./src/public/assets/**/*")
+    .pipe(gulp.dest("./dist/public/assets"));
+});
+
+// The default task which runs at start of the gulpfile.js
+gulp.task(
+  "default",
+  gulp.series(
+    "build-clean",
+    "typescript",
+    "views",
+    "images",
+    "stylesheets",
+    "assets"
+  ),
+  () => {
+    console.log("Done");
+  }
+);

nodemon.json

@@ -0,0 +1,6 @@
+{
+  "watch": ["src"],
+  "ext": "ts,ejs,css,json,js",
+  "ignore": ["src/**/*.spec.ts", "node_modules"],
+  "exec": "gulp; webpack; ts-node ./dist/app.js"
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "babylonjs-typescript-template",
+  "version": "0.0.0",
+  "description": " A BabylonJS barebones in typescript using Ammo.js for a physics engine. ",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Jonathan Cucuzza",
+  "license": "ISC",
+  "dependencies": {
+    "@types/ejs": "^3.0.7",
+    "@types/express": "^4.17.13",
+    "@types/express-ejs-layouts": "^2.3.2",
+    "@types/node": "^16.3.2",
+    "ammojs-typed": "^1.0.5",
+    "babylonjs": "^5.37.0",
+    "del": "^6.0.0",
+    "ejs": "^3.1.6",
+    "express": "^4.17.1",
+    "gulp": "^4.0.2",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "regenerator-runtime": "^0.13.11",
+    "ts-node": "^10.6.0",
+    "typescript": "^4.3.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.20"
+  }
+}

src/app.ts

@@ -0,0 +1,46 @@
+import express, { Application, Request, Response } from "express";
+import path from "path";
+import http from "http";
+// import expressLayouts from "express-ejs-layouts";
+
+const app: Application = express();
+const server: http.Server = http.createServer(app);
+
+const publicDirectoryPath = path.join(__dirname, "./public");
+app.use(express.static(publicDirectoryPath));
+
+// Setting the port
+const port = normalizePort(process.env.PORT || "3000");
+
+// EJS setup
+// app.use(expressLayouts);
+
+// Setting the root path for views directory
+app.set("views", path.join(__dirname, "views"));
+
+// Setting the view engine
+app.set("view engine", "ejs");
+
+/* Home route */
+app.get("/", (req: Request, res: Response) => {
+  res.render("index", {});
+});
+
+server.listen(port, () => {
+  console.log(`SERVER RUNNING ON ${port}`);
+});
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+function normalizePort(val: string) {
+  var port = parseInt(val, 10);
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+  if (port >= 0) {
+    return port;
+  }
+  return false;
+}

src/public/stylesheets/style.css

@@ -0,0 +1,14 @@
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#renderCanvas {
+  z-index: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+}

src/public/typescripts/domItems.ts

@@ -0,0 +1,3 @@
+export const canvas = document.getElementById(
+  "renderCanvas"
+) as HTMLCanvasElement;

src/public/typescripts/main.ts

@@ -0,0 +1,21 @@
+import * as B from "babylonjs";
+import Ammo from "ammojs-typed";
+import "regenerator-runtime/runtime";
+import { scene, engine } from "./scene";
+import { makeGround } from "./meshes/ground";
+import { makeCube } from "./meshes/cube";
+
+async function main(): Promise<void> {
+  const ammo = await Ammo();
+  const physics: B.AmmoJSPlugin = new B.AmmoJSPlugin(true, ammo);
+  scene.enablePhysics(new B.Vector3(0, -9.81, 0), physics);
+
+  makeCube();
+  makeGround();
+
+  engine.runRenderLoop(function () {
+    scene.render();
+  });
+}
+
+main();

src/public/typescripts/meshes/cube.ts

@@ -0,0 +1,21 @@
+import * as B from "babylonjs";
+import { scene } from "../scene";
+
+export function makeCube(): B.Mesh {
+  const cube: B.Mesh = B.MeshBuilder.CreateBox("cube", {
+    size: 0.5,
+  });
+
+  cube.position = new B.Vector3(0, 1, 0);
+
+  cube.physicsImpostor = new B.PhysicsImpostor(
+    cube,
+    B.PhysicsImpostor.BoxImpostor,
+    {
+      mass: 1,
+      restitution: 0.9,
+    },
+    scene
+  );
+  return cube;
+}

src/public/typescripts/meshes/ground.ts

@@ -0,0 +1,26 @@
+import * as B from "babylonjs";
+import { scene } from "../scene";
+
+export function makeGround(): B.Mesh {
+  const size = 4;
+  const ground = B.MeshBuilder.CreateGround(
+    "ground",
+    {
+      width: size,
+      height: size,
+    },
+    scene
+  );
+
+  ground.physicsImpostor = new B.PhysicsImpostor(
+    ground,
+    B.PhysicsImpostor.BoxImpostor,
+    {
+      mass: 0,
+      restitution: 0.9,
+    },
+    scene
+  );
+
+  return ground;
+}

src/public/typescripts/scene.ts

@@ -0,0 +1,42 @@
+import * as B from "babylonjs";
+import { canvas } from "./domItems";
+
+export const engine = new B.Engine(canvas, true);
+export const scene = makeScene();
+
+function makeScene(): B.Scene {
+  const scene = new B.Scene(engine);
+  createCamera(scene);
+  createLight(scene);
+  setBackground(scene);
+  return scene;
+}
+
+function createCamera(scene: B.Scene): void {
+  const alpha: number = Math.PI / 4;
+  const beta: number = Math.PI / 3;
+  const radius: number = 8;
+  const target: B.Vector3 = new B.Vector3(0, 0, 0);
+
+  new B.ArcRotateCamera(
+    "camera",
+    alpha,
+    beta,
+    radius,
+    target,
+    scene
+  ).attachControl(canvas, true);
+}
+
+function createLight(scene: B.Scene): B.HemisphericLight {
+  const light: B.HemisphericLight = new B.HemisphericLight(
+    "light",
+    new B.Vector3(1, 1, 0),
+    scene
+  );
+  return light;
+}
+
+function setBackground(scene: B.Scene): void {
+  scene.clearColor = new B.Color4(0, 0, 0, 1);
+}

src/views/index.ejs

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/stylesheets/style.css" />
+    <title>Babylon JS</title>
+  </head>
+  <body>
+    <canvas id="renderCanvas"></canvas>
+    <script src="javascripts/main.js"></script>
+  </body>
+</html>