这是我计算交点的代码:
var wallWidth = 1200;
var wallHeight = 500;
var containerWidth=1200,containerHeight=700; //div
//camera
camera = new THREE.PerspectiveCamera(60, containerWidth/containerHeight, 1, 10000);
camera.position.set(0, -wallHeight / 2 + 10, wallWidth);
这是我的功能,它与鼠标移动时的对象相交
function onDocumentMouseMove(event) {
mouse.x = ( event.clientX / containerWidth ) * 2 - 1;
mouse.y = -( event.clientY / containerHeight ) * 2 + 1;
var deltaX = event.clientX - mouseX;
var deltaY = event.clientY - mouseY;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(interactiveObj, true);
if (intersects.length > 0) {
//interaction with object
}
render();
}
它工作正常,即当div的宽度为100%时,我在相交对象中获取值,但是当我将div的大小减小为80%时,则对象未正确拾取,即当鼠标离物体很远。
最佳答案
使用以下代码更改鼠标矢量
文档MouseMove(event){
mouse.x = ( (event.clientX -renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1;
mouse.y = -( (event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height ) * 2 + 1;
var deltaX = event.clientX - mouseX;
var deltaY = event.clientY - mouseY;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(interactiveObj, true);
上的函数}
关于three.js - 减小div的宽度时用raycaster进行的检测不完全准确三.js(v72),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34892328/