Klikalne cząsteczki w pliku three.js PointCloud

Question

Wizualizuję trójwymiarowe punkty danych (które odczytałem za pomocą pliku csv) za pomocą narzędzia three.js. Chcę kliknąć punkty w tym PointCloud, aby wyświetlić inne dane pomiarowe dla tych konkretnych punktów. Zgodnie z przykładami okazało się, że jest to możliwe, ale nie działa. Mam następujący kod (w zasadzie z tych przykładów):

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

Ale przecina zawsze jest pustą tablicę bez względu na punkt przenieść na drugą.

Odnośnie cząstek obiektu I pisał:

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

gdzie wszystkie zmienne są inicjalizowane wcześniej PARTICLE_SIZE 20 i cząstki około 10.000 liczby z wartościami pomiędzy (0,0,0) i (10000, 10000, 10000). Do obracania i powiększania używam THREE.OrbitControls.

Czy ktoś widzi błąd, czy też nie jest w tym przypadku rozpalany z cząsteczkami?

Wielkie dzięki, Mika.

Answer 1

Podczas korzystania Raycaster z Points (dawniej PointCloud), trzeba mieć świadomość, że w konstruktorze Raycaster,

params.Points.threshold = 1 

Być może trzeba zmienić tę wartość, w zależności od skali sceny. Jednostki threshold są w jednostkach światowych.

Ponadto obszar kliknięcia będzie jedynie orientacyjny, ponieważ kod nie uwzględnia żadnej przezroczystości w Points.material.map.

Three.js r.72