クリック可能なparticle.js PointCloud

Question

私はthree.jsの助けを借りて3次元データポイント（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であり、粒子は（0,0,0）との間の値を持つ数で約10.000であり、 （10000,10000,10000）。私は回転とズームのためにTHREE.OrbitControlsを使います。

このケースでは誰もが間違いを見たり、レイキャスティングできないパーティクルを持っていますか？

ありがとう、 Mika。

Answer 1

Points（旧PointCloud）とRaycasterを使用して、あなたはRaycasterコンストラクタで、

params.Points.threshold = 1 

あなたは、あなたのシーンの規模に応じて、その値を変更する必要があることに注意する必要があります。 thresholdのユニットは世界累計台数です。

また、Points.material.mapの透明度をコードが考慮しないため、クリック領域は概算に過ぎません。

three.js