Clickable particles in three.js PointCloud

问题:

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.

回答1:

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