Clickable particles in three.js PointCloud

Question

I am visualizing 3d data points (which I read in via a csv-file) with the help of three.js. I want to click on points in that PointCloud to show other measurement data for those specific points. According to examples I found this is possible apparently but I don't get it working. I have the following code (basically from those examples):

function onDocumentMouseMove(e) {       
    mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
    mouseVector.y = 1 - 2 * (e.clientY / containerHeight);
    var vector = new THREE.Vector3(mouseVector.x, mouseVector.y, 0.5).unproject(camera);
    raycaster.ray.set(camera.position, vector.sub(camera.position).normalize());
    scene.updateMatrixWorld();
    intersects = raycaster.intersectObject(particles);
    console.log(intersects);
}

But intersects always is an empty array no matter which point I move over.

Regarding the particles Object I wrote the following:

geometry = new THREE.Geometry();        

for (var i = 0; i < howmany; i++) {
    var vector = new THREE.Vector3(data[i][0], data[i][2], data[i][1] );
    geometry.vertices.push(vector);
}

attributes = {
     size: { type: 'f', value: [] },
     customColor: { type: 'c', value: [] }
};

uniforms = {
    color: { type: "c", value: new THREE.Color( 0xFFFFFF ) },
    texture: { type: "t", value: THREE.ImageUtils.loadTexture( "js/threejs/examples/textures/sprites/disc.png" ) }
};

var shaderMaterial = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    attributes: attributes,
    vertexShader: document.getElementById( 'vertexshader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
    alphaTest: 0.9,
} );

particles = new THREE.PointCloud( geometry, shaderMaterial );

for (var i = 0; i < howmany; i++) {
    colors[i] = new THREE.Color(RainBowColor(data[i][3], 4));
    sizes[i] = PARTICLE_SIZE * 0.5;
}
scene.add(particles);

where all the the variables are initialized previously, PARTICLE_SIZE is 20 and particles are about 10.000 in number with values between (0,0,0) and (10000,10000,10000). For rotating and zooming I use THREE.OrbitControls.

Does anyone see the mistake or is raycasting with particles not possible in this case?

Many thanks, Mika.

THREE.Raycaster.params.PointCloud.threshold is 1 by default. Try increasing it. Step through with the debugger on a small problem having 2 particles. — WestLangley
I just spontaneously tried raycaster.params.PointCloud.threshold = 20; and ... it worked. I will have to work on the fine tuning of point sizes anyways. So, at first, it helps a lot that i know the importance of that threshold. Thank you. — Mika Prouk

WestLangley WestLangley · Accepted Answer · 2015-01-09T17:46:34

When using Raycaster with Points (formerly PointCloud), you need to be aware that in the Raycaster constructor,

params.Points.threshold = 1

You may have to change that value, depending on the scale of your scene. The units of threshold are in world units.

Also, the click area will only be approximate, because the code does not take into consideration any transparency in Points.material.map.

three.js r.72

Clickable particles in three.js PointCloud

1 Answers