javascript - Clickable particles in three.js PointCloud - Stack Overflow

admin管理员组

文章数量:1323200

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.

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.

• javascript
• three.js
• raycasting

Share Improve this question Follow asked Jan 9, 2015 at 15:35 Mika ProukMika Prouk 51555 silver badges1717 bronze badges 2

• 1 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 Commented Jan 9, 2015 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 Commented Jan 9, 2015 at 16:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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

本文标签： javascriptClickable particles in threejs PointCloudStack Overflow