Three.js not working with Electron



these days I was trying to reproduce this Raspberry Pi Project. They provide some code which node.js, electron and three.js to set up a music visualization.
Long story short, it didn’t work as expected. So I am trying to strip down the code to find the problem. To me it seems like there is a problem electron and three.js.
Let me give you a minimal example. I’ve got the files main.js, index.html and renderer.js, and of course the three.min.js.

main.js :

const {app, BrowserWindow} = require('electron')                                             
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true

app.on('ready', createWindow)

index.html :

<!DOCTYPE html>                                                                              
      <meta charset = "UTF-8">
      <title>Simple Cube</title>
      <script src="three.min.js"></script>      

      <div class = "container">
        <script src="./renderer.js"></script>

renderer.js :


function init() {

        var WIDTH  = 800,
            HEIGHT = 600;
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( WIDTH,HEIGHT );
        document.body.appendChild( renderer.domElement );
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(
            35,             // Field of view
            WIDTH/HEIGHT,   // Aspect ratio
            0.1,            // Near plane
            20000           // Far plane
        camera.position.set( -10,-10,  5 );
        camera.lookAt( scene.position );

        // Create an event listener that resizes the renderer with the browser window.
        window.addEventListener('resize', function() {
            var WIDTH = window.innerWidth,
                HEIGHT = window.innerHeight;
            renderer.setSize(WIDTH, HEIGHT);
            camera.aspect = WIDTH / HEIGHT;
        // Create a light, set its position, and add it to the scene.
        var light = new THREE.PointLight( 0xFFFF00 );
        light.position.set( -100, 200, 100 );
        scene.add( light );
        var geometry = new THREE.BoxGeometry( 5, 5, 5 );
        var material = new THREE.MeshLambertMaterial( { color: 0xFF0000 } );
        var mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        // Set the background color of the scene.
        renderer.setClearColor(0x333F47, 1);
        renderer.render( scene, camera );

When I open the index.html in chromium, I see a red cube as expected.
When I do “electron .”, I receive just a white screen (size and title of the window are correct).

Can anyone help me with this?


The instructions in the tutorial want you to use npm start, not electron ..


That’s right, but the outcome is the same with npm start