我目前正在用 three.js 和一些 jQuery 构建一个应用程序。我目前正在光线转换并在光线转换的位置放置一个助手。我或多或少正在努力实现 this .
我已经设法实现了这一点,但是在移动我的对象的坐标并将相机移动到新位置时,我的光线转换或至少是助手关闭了。它似乎偏离了大约 30 像素,但取决于您改变相机 Angular ,如您从 here 中看到的那样
下面是帮助程序的代码和光线转换的 onMouseMove 事件。
// RAYCAST HELPER
var geometry = new THREE.CylinderGeometry( 0, 5, 15, 3 ); // radius at top, radius at bottom, height, segments
//geometry.applyMatrix( new THREE.Matrix4().makeTranslation( -50, 0, 0 ) );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
helper = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({ color: 0xEB1515, ambient: 0xEB1515, wireframe: false }) );
scene.add( helper );
rays = true;
function onMouseMove( event ) {
//console.log("Mouse moved");
$( document ).ready(function() {
if ( rays == true ) {
cX = event.clientX - $( "#info" ).width()
cY = event.clientY - $( "#topbar" ).height()
mouseVector.x = 2 * ( cX / canvaswidth ) - 1;
mouseVector.y = 1 - 2 * ( cY / canvasheight );
mouseVector.z = 1;
var raycaster = projector.pickingRay( mouseVector.clone(), camera );
for (var i = 0; i < buildingsroofs.length; i++) {
var intersects = raycaster.intersectObject( buildingsroofs[i]);
// Toggle rotation bool for meshes that we clicked
if ( intersects.length > 0 ) {
console.log("Intersection");
helper.position.set( 0, 0, 0 );
helper.lookAt( intersects[ 0 ].face.normal );
helper.position.copy(intersects[0].point);
}
}
} //End of overarching if loop
})
} //End of onMouse function
有趣的是,我让它工作了here但是这些对象的坐标与我所追求的不符。您还可以看到我正在调整顶部 div 和侧面 div 的高度,所以这似乎不是我最初想象的问题。
最佳答案
由于其他一切都是正确的,您的 mouseVector
x
和 y
值(即 clientX
和 clientY
) 与您的 WebGL Canvas 相比最有可能关闭(例如,您可能从 Canvas 以外的其他元素获取这些。
检查这一点的最简单方法是将鼠标放在 Canvas 的左上角(应该是 (0, 0)
并在单击时注销鼠标位置以查看您的值是否关闭。对右下角应用相同的内容,检查 Canvas 的宽度和高度。我用这种方式解决了类似的问题。在我的例子中,(cx, cy)
是 (-10 , -10)
这足以导致光线转换中的重大错误。
关于javascript - Three.js Raycast 从鼠标位置关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24035234/