diff --git a/index.html b/index.html new file mode 100644 index 0000000..c5efe42 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + Babylon JS Electron App + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..ada3ad6 --- /dev/null +++ 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 new file mode 100644 index 0000000..ad8df90 --- /dev/null +++ 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. \ No newline at end of file diff --git a/src/renderer.ts b/src/renderer.ts new file mode 100644 index 0000000..8e52c40 --- /dev/null +++ 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); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..31f6742 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "es6", + "module": "commonjs", + "noImplicitAny": true, + "sourceMap": true, + "outDir": "app", + "baseUrl": ".", + "paths": { + "*": ["node_modules/*"] + } + }, + "include": [ + "src/**/*" + ] + } \ No newline at end of file