我正在使用three.js可视化通过csv文件读取的3D数据点。我想点击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);
}
但是无论我移动哪个点,交点(intersects)始终为空数组。
关于粒子对象(Particles Object),我写了以下内容:
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来进行旋转和缩放。
有人看到错误了吗?或者在这种情况下无法使用射线投射与粒子交互吗?
非常感谢, Mika。
THREE.Raycaster.params.PointCloud.threshold
默认值为1。尝试增加它。在只有2个粒子的小问题上使用调试器逐步调试。 - WestLangleyraycaster.params.PointCloud.threshold = 20;
,然后...它奏效了。无论如何,我还需要调整点的大小。所以,起初,知道这个阈值的重要性对我帮助很大。谢谢。 - Mika Prouk