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, Jan 09 '15 at 16:27
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, Jan 09 '15 at 16:38

WestLangley · Accepted Answer · 2015-10-04T15:47:29.973

8

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

edited Oct 04 '15 at 15:47

answered Jan 09 '15 at 17:46

WestLangley

102,557
10
276
276

I have not defined "Raycaster.params" in "THREE" object. Any changes in R71? ERR.Uncaught TypeError: Cannot read property 'PointCloud' of undefined – Martin Jul 23 '15 at 18:16
@raphaelRauwolf PointCloud -> Points. Thanks for the tip. – WestLangley Oct 04 '15 at 15:48

Clickable particles in three.js PointCloud

1 Answers1

Linked