Üç.js PointCloud

Question

içerisindeki tıklanabilir parçacıklar üç veri kaynağı yardımıyla (bir csv dosyasında okuduğum) 3B veri noktalarını görselleştiriyorum. Bu belirli noktalara ait diğer ölçüm verilerini göstermek için PointCloud'daki noktalara tıklamak istiyorum. Örneklere göre, bunun mümkün olduğunu gördüm ama işe yaramıyor. Ben (temelde bu örneklerden) Aşağıdaki kodu var:

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

Ama ne olursa olsun ben üzerinde hareket ettiği nokta boş bir dizi her zaman kesişiyor olduğunu. Bütün değişkenler yukarıda başlatılır

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 ve partiküller (0,0,0) arasında değerler ile yaklaşık 10.000 sayısı ve: parçacıkları ile ilgili olarak

Aşağıdaki yazdım Nesne (10000,10000,10000). Döndürme ve yakınlaştırma için THREE.OrbitControls kullanıyorum.

Bu durumda hata yapan veya parçacıklarla raycasting yapan kimse var mı?

Çok teşekkürler, Mika.

Answer 1

Points (eski PointCloud) ile Raycaster kullanarak, sen Raycaster oluşturucu içinde,

params.Points.threshold = 1 

Sen sahnenin ölçeğine bağlı olarak, bu değeri değiştirmek gerekebilir farkında olması gerekir. threshold birimleri dünya birimleridir. Kod Points.material.map dikkate herhangi şeffaflığı almaz çünkü

Ayrıca tıklama alanı sadece yaklaşık olacaktır.

Three.js