檢測與raycaster不完全精確時div的寬度減小，three.js所（V72）

這是我的用於計算相交的代碼：檢測與raycaster不完全精確時div的寬度減小，three.js所（V72）

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％，則該對象沒有被正確拾取，即當鼠標距離物體很遠時，它會選取物體。

來源

2016-01-20 anuj rajput

使用下面的代碼爲chnage鼠標矢量

功能onDocumentMouseMove（事件）{

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

}

來源

2016-01-20 06:22:14 Nukes

感謝您的幫助，它爲我工作。 –

而不是使用'event.clientX - renderer.domElement.offsetLeft'，你可以使用'event.offsetX' https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX – Brakebein

而不是使用event.clientX - renderer.domElement.offsetLeft，你可以只使用event.offsetX

我是哈維同樣的問題和Brakebein的答案最適合我需要的。

來源

2016-07-20 11:26:24 mrsdohpaz

以下獲取相對鼠標位置的方法似乎更準確。

var rect = renderer.domElement.getBoundingClientRect(); 
mouse.x = ((event.clientX - rect.left)/rect.width) * 2 - 1; 
mouse.y = - ((event.clientY - rect.top)/rect.height) * 2 + 1;

來源

2017-05-19 01:05:10 Doguleez

檢測與raycaster不完全精確時div的寬度減小，three.js所（V72）

回答

相關問題