for ( var i = 0; i < 100; i ++ ) {

    var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x666666, program: programStroke } ) );
    particle.position.x = Math.random() * 800 - 400;
    particle.position.y = Math.random() * 800 - 400;
    particle.position.z = Math.random() * 800 - 400;
    particle.scale.x = particle.scale.y = Math.random() * 10 + 10;
    scene.add(particle);
    scene.children[i].id = "q"+i;  // to select 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');

I tried to access the particles inside scene, so I pre-defined ids before adding them into scene. When I printed out scene.children, I could see their ids are like 'q0', 'q1', 'q2'.... However, document.getElementById() does not allow me to access those items.. In this case, how should I do it?

for ( var i = 0; i < 100; i ++ ) {

    var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x666666, program: programStroke } ) );
    particle.position.x = Math.random() * 800 - 400;
    particle.position.y = Math.random() * 800 - 400;
    particle.position.z = Math.random() * 800 - 400;
    particle.scale.x = particle.scale.y = Math.random() * 10 + 10;
    scene.add(particle);
    scene.children[i].id = "q"+i;  // to select 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');

I tried to access the particles inside scene, so I pre-defined ids before adding them into scene. When I printed out scene.children, I could see their ids are like 'q0', 'q1', 'q2'.... However, document.getElementById() does not allow me to access those items.. In this case, how should I do it?

• javascript
• three.js

1 Answer 1

Instead of doing:

scene.children[i].id = "q"+i;

do:

particle.name = "q"+i;

and then

scene.traverse (function (object)
{
    if (object instanceof THREE.Particle)
    {
        if (object.name === 'q10')
            // do what you want with it.
    }
});