Three.js not working with Electron


#1

Hi,

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>                                                                              
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Simple Cube</title>
      <script src="three.min.js"></script>      
   </head>

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

renderer.js :

init();
animate();

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 );
    
        scene.add(camera);

        // 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;
            camera.updateProjectionMatrix();
        });
    
        // 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?


#2

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


#3

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