在three.js场景中,我有一些多维数据集。我想为用户提供使用鼠标选择一个框的可能性。
这是重要的代码(我使用Three.js版本69。):
function init() {
[...]
camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
[...]
// in a 'for' iteration, I a many boxes in a 'objects' array :
abox = new THREE.Mesh( geometry, material );
objects.push( abox );
[...]
vector = new THREE.Vector3(0,0,0);
raycaster = new THREE.Raycaster();
animate();
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
if ( camera instanceof THREE.OrthographicCamera ) {
vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, - 1 );
vector.unproject( camera );
dir.set( 0, 0, - 1 ).transformDirection( camera.matrixWorld );
raycaster.set( vector, dir );
} else if ( camera instanceof THREE.PerspectiveCamera ) {
vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
vector.unproject( camera );
raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
}
var intersects = raycaster.intersectObjects( objects , false);
if ( intersects.length > 0 ) {
var intersect = intersects[ 0 ];
// change color of the face
intersect.object.material.color.setHex( Math.random() * 0xFF0000 );
renderer.render(scene, camera);
}
}
当我单击一个多维数据集时,所选的点(相交)并不完全(接近但不完全)在我单击的位置。就像是一个转变,一个翻译(我尝试过使用正交摄影机或透视摄影机...。同样的问题)。
欢迎任何帮助。
谢谢
正如WestLangley向我建议的那样,答案是关于画布的偏移量。他在这里写了一个很好的解释THREE.js Ray Intersect通过添加div失败
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句