Getting started with three.js and electron.js.

I took Enterprise System Development as my major in my bachelors with several electives focusing on Animation and Game Development. After completing Interactive Media which largely focused on 2D graphics, processing and p5.js, my second step towards my animation passion was Computer Graphics. As I attended my first lecture, I was so happy that they were teaching the current session using WebGL instead of OpenGL (as a full-stack developer, I loved JavaScript and hated C++).

The second day was its workshop where we practised what we learned during the lecture. In the first workshop, we learned about the most basics of computer graphics like creating a viewport, cameras and some basic primitives. Although I enjoyed learning all those concepts, I was disappointed by the javascript coding setup tutor was using. Basically, he was writing code in Atom, opening .html file by searching in his file explorer and double-clicking it, and refreshing each and every time he was making small changes. Moreover, he was writing every piece of code in <script>tag inside a single HTML file. I was used to working with full hot reload and VS code’s IntelliSense and I wanted to make my developer experience more satisfying. So, I thought why not create a separate desktop application using electron.js and create a different window for different workshop’s task, so that I can finish my whole computer graphics subject and get out of that subject with a single application. And I wanted to share how I did that with everyone, so I create a boilerplate for getting started as well. Check out here.

This is a simple guide on how to get started with three.js, a WebGL library with electron.js, a library for building a cross-platform desktop application. This is not a detailed Three.js and Electron.js article.

Before getting started, let’s install the electron and scaffold a simple electron application.

$ mkdir awesome-project && cd awesome-project
$ npm init -y
$ npm i electron electron-reload
$ touch index.js
$ code .

Let’s try to explain each concept in the above code:

1. First, we imported the electron package and path package.
2. Second, we imported electron-reload package which is the simplest way to load files in the main window when those files are changed (Learn more here).
3. Then we take out app, BrowserWindow, Menu from the electron and created our two windows lab01_Window() and mainWindow() using our BrowserWindow.
4. Line 13 is saying, when our app is ready, start the main window and build then set our application menu from the template mainMenuTemplate.
5. We are loading separate HTML file for separate windows i.e lab01.loadURL(`file://${__dirname}/lab01.html`) .
6. In our mainMenuTemplate, we are given the name for our menu which a click handler and accelerator (shortcut key). Note: for cross-platform, we have to do some conditional checking and use the appropriate shortcut key. Check the documentation for more.
7. Line number 9 and 22–24 is basically to avoid the following warning.

And, here is our lab01.html file. Note: In this article, I am only going to create lab01.html. You can also create an index.html file with several buttons that will take to respective other windows.

We downloaded and imported out the three.js library and OrbitControl library (this quickly sets up a simple solution for panning, zooming, and changing the orientation of a camera with the mouse, keyboard, and touch events).

Finally, here is our main.js .

Okay, that's a lot. Let’s take it slowly, explaining one by one.

• init() function does our basic setup like creating a scene, camera, controls and renderer. Here, we instantiate them as well as created our primitives and added them to our scene.
• getSphere() and getPointLight() is for creating our basic primitive sphere mesh and point light.
• render() is responsible for rendering our scene. Here, requestAnimationFrame() method tells the browser that we wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
• animate() is our custom function which will be responsible for animating that sphere by moving its position towards y co-ordinate.

Now, try running $ electron . or $npm start then you will see a window popup with moving sphere.

Conclusion

Now, you can add other new windows and create some cool stuff.