Кликабельные частицы в three.js PointCloud

Я визуализирую 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);
}

Но пересечения всегда являются пустым массивом, независимо от того, какую точку я перемещаю.

По поводу частиц Object я написал следующее:

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.

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

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


person Mika Prouk    schedule 09.01.2015    source источник
comment
THREE.Raycaster.params.PointCloud.threshold по умолчанию равно 1. Попробуйте увеличить его. Пройдитесь с отладчиком по небольшой проблеме с 2 частицами.   -  person WestLangley    schedule 09.01.2015
comment
Я просто спонтанно попробовал raycaster.params.PointCloud.threshold = 20; и... сработало. В любом случае мне придется поработать над тонкой настройкой размеров точек. Итак, во-первых, мне очень помогает то, что я знаю важность этого порога. Спасибо.   -  person Mika Prouk    schedule 09.01.2015


Ответы (1)


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

params.Points.threshold = 1

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

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

три.js р.72

person WestLangley    schedule 09.01.2015
comment
Я не определил Raycaster.params в объекте THREE. Есть изменения в R71? ERR.Uncaught TypeError: Не удается прочитать свойство «PointCloud» неопределенного - person Martin; 23.07.2015
comment
@raphaelRauwolf PointCloud -> Очки. Спасибо за совет. - person WestLangley; 04.10.2015