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?