Нажимаемые частицы в тэге. Js PointCloud

Question

Я визуализирую 3D-точки данных (которые я прочитал через csv-файл) с помощью three.js. Я хочу щелкнуть точки в этом 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.

Кто-нибудь видит ошибку или raycasting с частицами, которые не возможны в этом случае?

Большое спасибо, Mika.

Answer 1

При использовании Raycaster с Points (ранее PointCloud), вы должны знать, что в Raycaster конструктору,

params.Points.threshold = 1 

Вы, возможно, придется изменить это значение, в зависимости от масштаба вашей сцены. Единицы измерения threshold находятся в мировом масштабе.

Кроме того, область щелчков будет приблизительной, поскольку код не учитывает любую прозрачность в Points.material.map.

Three.js R.72