for ( var j = 0; j < 100; j ++ ) {
var particles = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x666666, program: programStroke } ) );
particles.position.x = Math.random() * 800 - 400;
particles.position.y = Math.random() * 800 - 400;
particles.position.z = Math.random() * 800 - 400;
particles.scale.x = particles.scale.y = Math.random() * 10 + 10;
scene.add(particles);
scene.children[j].id = "q"+j; // for selecting item using document.getElementById();
}
projector = new THREE.Projector();
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
if(showStats == true){
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
}
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
console.log("1 -- "+scene);
console.log("2 -- "+scene.children);
console.log("3 -- "+document.getElementById('q1');
While trying to access the particles within the scene, I assigned individual ids to them before adding to the scene. Despite seeing the ids as 'q0', 'q1', 'q2'... when printing out scene.children, I faced issues using document.getElementById() to access those items. What would be the correct approach in such a scenario?