three.js PointCloud 中的可点击粒子答案

【问题标题】：Clickable particles in three.js PointCloudthree.js PointCloud 中的可点击粒子
【发布时间】：2023-04-09 13:07:01
【问题描述】：

在 three.js 的帮助下，我正在可视化 3d 数据点（我通过 csv 文件读取）。我想单击该 PointCloud 中的点以显示这些特定点的其他测量数据。根据示例，我发现这显然是可能的，但我没有得到它的工作。我有以下代码（基本上来自这些示例）：

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);
}

但无论我移动到哪一点，相交总是一个空数组。

关于粒子对象我写了以下内容：

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。

有没有人发现错误或者在这种情况下无法使用粒子进行光线投射？

非常感谢，米卡。

【问题讨论】：

THREE.Raycaster.params.PointCloud.threshold 默认为 1。尝试增加它。使用调试器逐步解决具有 2 个粒子的小问题。
我只是自发地尝试了raycaster.params.PointCloud.threshold = 20; 并且......它奏效了。无论如何，我将不得不对点大小进行微调。所以，起初，我知道这个门槛的重要性有很大帮助。谢谢。

标签： javascript three.js raycasting

【解决方案1】：

将Raycaster 与Points（以前的PointCloud）一起使用时，您需要注意在Raycaster 构造函数中，

params.Points.threshold = 1

您可能需要更改该值，具体取决于场景的规模。 threshold 的单位是世界单位。

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

three.js r.72

【讨论】：

我没有在“三个”对象中定义“Raycaster.params”。 R71有什么变化吗？ ERR.Uncaught TypeError：无法读取未定义的属性“PointCloud”
@raphaelRauwolf PointCloud -> 点数。感谢您的提示。