Clickable particles in three-dimensional space.

Question

I visualize 3D data points (which I read through a csv file) using three.js. I want to click on the points in this PointCloud to show other measurement data for these specific points. According to examples, I found that this is possible, but I do not work. I have the following code (mostly from these 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 the intersection is always an empty array, no matter where I move.

Regarding the particle 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 variables are initialized earlier, PARTICLE_SIZE is 20, and the number of particles is about 10.000 with values ​​between (0,0,0) and (100001000010000). For rotation and scaling, I use THREE.OrbitControls.

Does anyone see a bug or raycasting with particles that are not possible in this case?

Thanks a lot, Mika.

Answer 1

When using Raycaster with Points (formerly PointCloud ) you need to know what is in the Raycaster constructor

 params.Points.threshold = 1 

You may need to change this value depending on the scale of your scene. The threshold units are in world units.

In addition, the click area will be only approximate, because the code does not take into account the transparency in Points.material.map .

three.js r.72