三个点中的可点击粒子PointCloud

Question

我在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.

在这种情况下,是否有人看到错误或使用粒子进行光线投射？

非常感谢,米卡.

Answer 1

Raycaster与Points(以前PointCloud)一起使用时,您需要注意在Raycaster构造函数中,

params.Points.threshold = 1

您可能需要更改该值,具体取决于场景的比例.单位threshold是世界单位.

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

three.js r.72