After refactoring some code, I encountered an issue where nothing was being displayed. Surprisingly, there were no errors in the console to guide me towards a solution. The code in question is supposed to generate the same output as a previously functioning version, but it fails to do so. Below is the code that's causing trouble.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="http://threejs.org/build/three.min.js"></script>
<script>var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var objects = [
{
name : "earth",
geometry : new THREE.SphereGeometry(1, 32, 32),
material : new THREE.MeshPhongMaterial(),
mesh : new THREE.Mesh(this.geometry, this.material),
init : function(scene){
console.log("Wtf");
this.mesh.position.set(0,0,0);
//this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
scene.add(this.mesh);
console.log("ugh");
},
animate : function(t){this.mesh.position.set(0+t/100,0+t/100,0+t/100);}
},
{
name : "satellite",
geometry : new THREE.SphereGeometry(0.1, 32, 32),
material : new THREE.MeshPhongMaterial(),
mesh : new THREE.Mesh(this.geometry, this.material),
init : function(scene){
console.log("Wtf");
this.mesh.position.set(1.5,0,0);
//this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
scene.add(this.mesh);
console.log("ugh");
},
animate : function(t){this.mesh.position.set(1.5+t/100,0+t/100,0+t/100);}
}];
objects.forEach(object => object.init(scene));
var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
scene.add(light);
camera.position.x = 0;
camera.position.y = -5;
camera.position.z = 0;
camera.lookAt(new THREE.Vector3( 0, 0, 0));
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>Below is the code from a working example for comparison.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="http://threejs.org/build/three.min.js"></script>
<script>var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var earth_geometry = new THREE.SphereGeometry(1, 32, 32);
var earth_material = new THREE.MeshPhongMaterial();
var earth_mesh = new THREE.Mesh(earth_geometry, earth_material);
earth_mesh.position.set(0,0,0);
//earth_material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
scene.add(earth_mesh);
var satellite_geometry = new THREE.SphereGeometry(0.1, 32, 32);
var satellite_material = new THREE.MeshPhongMaterial();
var satellite_mesh = new THREE.Mesh(satellite_geometry, satellite_material);
satellite_mesh.position.set(1.5,0,0);
//satellite_material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
scene.add(satellite_mesh);
var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
scene.add(light);
camera.position.x = 0;
camera.position.y = -5;
camera.position.z = 0;
camera.lookAt(new THREE.Vector3( 0, 0, 0));
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>I've attempted moving the scene.add function outside of the init method and manually updating it with scene.add(object[0].mesh), as well as changing 'objects' to 'const' and 'let', but none of these changes have resolved the issue.