three.js中的可點擊粒子PointCloud

在three.js的幫助下，我可視化了三維數據點（通過csv文件讀取）。我想點擊該PointCloud中的點來顯示這些特定點的其他測量數據。根據示例我發現這可能顯然，但我不明白它的工作。我有以下代碼（基本上從這些例子）：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。

有沒有人看到這個錯誤或是在這種情況下是不可能使用粒子進行光線投射？

非常感謝， Mika。

來源

2015-01-09 Mika Prouk

'THREE.Raycaster.params.PointCloud.threshold'默認爲1。嘗試增加它。通過調試器解決一個有2個粒子的小問題。 – WestLangley

我只是自發地嘗試'raycaster.params.PointCloud.threshold = 20;'和...它的工作。無論如何，我將不得不對點數進行微調。所以，起初，我知道這個門檻的重要性有很大的幫助。謝謝。 –

當使用Raycaster與Points（以前PointCloud），你需要知道的是，在Raycaster構造，

params.Points.threshold = 1

您可能需要更改該值，根據您的場景的比例。 threshold的單位是世界單位。

此外，點擊區域只是近似值，因爲代碼沒有考慮到Points.material.map中的任何透明度。

three.js r.72

來源

2015-01-09 17:46:34 WestLangley

我沒有在「THREE」對象中定義「Raycaster.params」。 R71有什麼變化？ ERR.Uncaught TypeError：無法讀取未定義的屬性'PointCloud' – Martin

已更新的答案。 – WestLangley

@raphaelRauwolf PointCloud - >點數。謝謝你的提示。 – WestLangley

three.js中的可點擊粒子PointCloud

回答

相關問題