三个点中的可点击粒子PointCloud [英] Clickable particles in three.js PointCloud

问题描述

我在three.js的帮助下可视化3d数据点（我通过csv文件读取）。
我想点击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);

其中所有变量先前已初始化，PARTICLE_SIZE为20且粒子数量约为10.000介于（0,0,0）和（10000,10000,10000）之间。对于旋转和缩放，我使用THREE.OrbitControls。

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?

非常感谢，
Mika。

Many thanks, Mika.

推荐答案

使用时Raycaster Points （以前 PointCloud ），你需要知道 Raycaster 构造函数，

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.

此外，点击区域只是近似值，因为代码没有考虑 Points.material.map 中的任何透明度。

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

three.js r.72

这篇关于三个点中的可点击粒子PointCloud的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！