Question

I’m trying to build 3 red Spheres with three.js…with no luck 🙁

Now this is my code…anybody can tell me what I’m doing wrong??
The only thing I see is one red sphere…

var camera, scene, renderer,
mouseX = 0, mouseY = 0;

init();

function init() {

// Camera params : 
// field of view, aspect ratio for render output, near and far clipping plane. 
    camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 1000 );

// move the camera backwards so we can see stuff! 
// default position is 0,0,0.
camera.position.z = 1000;

// the scene contains all the 3D object data
    scene = new THREE.Scene();

// and the CanvasRenderer figures out what the 
// stuff in the scene looks like and draws it!  
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

// the renderer's canvas domElement is added to the body
    document.body.appendChild( renderer.domElement );

makeParticles(); 

// add the mouse move listener
document.addEventListener( 'mousemove', onMouseMove, false );

// render 30 times a second (should also look 
// at requestAnimationFrame) 
setInterval(update,1000/30); 

}

function update(){

//updateParticles();

// and render the scene from the perspective of the camera
renderer.render( scene, camera );

}

function makeParticles() { 

var geometry,material,mesh; 

    // create a sphere shape        
    geometry = new THREE.SphereGeometry( 50, 16, 16 );

    // give a shape red color
    material = new THREE.MeshLambertMaterial({color: 0xFF1111});    

    // create an object
    mesh = new THREE.Mesh( geometry, material );

    mesh.position.x = 0;

    // add it to the scene
    scene.addObject( mesh );
}

// called when the mouse moves
function onMouseMove( event ) {
// store the mouseX and mouseY position 
mouseX = event.clientX;
mouseY = event.clientY;
}

Answer 1

Kind of late, but if all your spheres are in the same position (mesh.position.x = 0;) you will only see one sphere.