Particelle cliccabili in three.js PointCloud

Question

Sto visualizzando punti dati 3d (che ho letto tramite un file CSV) con l'aiuto di three.js. Voglio fare clic sui punti in quel PointCloud per mostrare altri dati di misurazione per quei punti specifici. Secondo gli esempi, ho trovato che questo è possibile a quanto pare, ma non riesco a farlo funzionare. Ho il seguente codice (in pratica da questi esempi):

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

Ma interseca sempre è un array vuoto non importa quale punto mi sposto.

Per quanto riguarda le particelle oggetto che scrive:

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

cui tutte le variabili sono inizializzate in precedenza, è PARTICLE_SIZE 20 e le particelle sono circa 10.000 in numero con valori compresi tra (0,0,0) e (10000,10000,10000). Per la rotazione e lo zoom uso THREE.OrbitControls.

Qualcuno vede l'errore o il raycasting con particelle non è possibile in questo caso?

Molte grazie, Mika.

Answer 1

Quando si utilizza Raycaster con Points (ex PointCloud), è necessario essere consapevoli che nel costruttore Raycaster,

params.Points.threshold = 1 

potrebbe essere necessario modificare tale valore, a seconda della scala della scena. Le unità di threshold sono in unità del mondo.

Inoltre, l'area di clic sarà solo approssimativa, in quanto il codice non tiene conto della trasparenza in Points.material.map.

Three.js r.72