Initial add

justinctlam · Dec 21, 2017 · 5a489af · 5a489af
1 parent 6545ef3
commit 5a489af
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>Babylon JS Electron App</title>
+    <style>
+        html,
+        body {
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        #render-canvas {
+            width: 100%;
+            height: 100%;
+            touch-action: none;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="render-canvas"></canvas>
+    <script>
+        require('./app/renderer.js');
+    </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "babylonjselectron",
+  "version": "1.0.0",
+  "description": "This is a babylonjs electron sample",
+  "main": "./app/main.js",
+  "scripts": {
+    "build": "tsc",
+    "start": "electron ./app/main.js",
+    "dist": "build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babylonjs": "^3.1.1"
+  },
+  "devDependencies": {
+    "typescript": "^2.6.2",
+    "electron-builder": "^19.49.0",
+    "electron": "^1.7.9"
+  },
+  "build": {
+    "appId": "yourappid",
+    "dmg": {
+      "contents": [
+        {
+          "x": 110,
+          "y": 0
+        },
+        {
+          "x": 240,
+          "y": 0,
+          "type": "link",
+          "path": "/Applications"
+        }
+      ]
+    }
+  }
+}
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,56 @@
+import { app, BrowserWindow } from "electron";
+import * as path from "path";
+import * as url from "url";
+
+let mainWindow: Electron.BrowserWindow;
+
+function createWindow() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    height: 600,
+    width: 800,
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(url.format({
+      pathname: path.join(__dirname, "../index.html"),
+      protocol: "file:",
+      slashes: true,
+  }));
+
+  // Open the DevTools.
+  mainWindow.webContents.openDevTools();
+
+  // Emitted when the window is closed.
+  mainWindow.on("closed", () => {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null;
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on("ready", createWindow);
+
+// Quit when all windows are closed.
+app.on("window-all-closed", () => {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", () => {
+  // On OS X it"s common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow();
+  }
+});
+
+// In this file you can include the rest of your app"s specific main process
+// code. You can also put them in separate files and require them here.
diff --git a/src/renderer.ts b/src/renderer.ts
@@ -0,0 +1,57 @@
+import * as BABYLON from 'babylonjs';
+
+export default class Renderer {
+    private _canvas: HTMLCanvasElement;
+    private _engine: BABYLON.Engine;
+    private _scene: BABYLON.Scene;
+
+    createScene(canvas: HTMLCanvasElement, engine: BABYLON.Engine) {
+        this._canvas = canvas;
+
+        this._engine = engine;
+
+        // This creates a basic Babylon Scene object (non-mesh)
+        const scene = new BABYLON.Scene(engine);
+        this._scene = scene;
+
+        // This creates and positions a free camera (non-mesh)
+        const camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
+
+        // This targets the camera to scene origin
+        camera.setTarget(BABYLON.Vector3.Zero());
+
+        // This attaches the camera to the canvas
+        camera.attachControl(canvas, true);
+
+        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
+        const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
+
+        // Default intensity is 1. Let's dim the light a small amount
+        light.intensity = 0.7;
+
+        // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
+        const sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
+
+        // Move the sphere upward 1/2 its height
+        sphere.position.y = 1;
+
+        // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
+        const ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
+    }
+
+    initialize(canvas: HTMLCanvasElement) {
+        const engine = new BABYLON.Engine(canvas, true);
+        this.createScene(canvas, engine);
+
+        engine.runRenderLoop(() => {
+            this._scene.render();
+        });
+
+        window.addEventListener('resize', function () {
+            engine.resize();
+        });
+    }
+}
+
+const renderer = new Renderer();
+renderer.initialize(document.getElementById('render-canvas') as HTMLCanvasElement);
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "target": "es6",
+      "module": "commonjs",
+      "noImplicitAny": true,
+      "sourceMap": true,
+      "outDir": "app",
+      "baseUrl": ".",
+      "paths": {
+        "*": ["node_modules/*"]
+      }
+    },
+    "include": [
+      "src/**/*"
+    ]
+  }