这是我计算交集的代码:
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%时,我在intersects对象中获取值,但是当我将div大小减小到80%时,对象没有正确拾取,即它选择了鼠标离物体很远时的物体。
答案 0 :(得分:8)
在下面的代码中使用chnage你的鼠标向量
function onDocumentMouseMove(event){
reviews
}
答案 1 :(得分:2)
您可以使用
,而不是event.clientX - renderer.domElement.offsetLeft
event.offsetX
我遇到了同样的问题,Brakebein的答案最适合我的需要。
答案 2 :(得分:0)
以下获取相对鼠标位置的方法似乎更准确。
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;
答案 3 :(得分:0)
经过长时间使用React搜索这个变种帮助我提高raycaster精度(也许它可以帮助某人):
class Scene extends React.Component {
componentDidMount() {
const width = 400;
const height = 400;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(95, width / height, 1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
var controls = new OrbitControls(camera);
const geometry = new THREE.SphereGeometry(2, 100, 100);
.....
const material = new THREE.MeshBasicMaterial({
color: "#00bfff",
map: canvasTexture
});
const sphere = new THREE.Mesh(geometry, material);
camera.position.z = 3;
scene.add(sphere);
renderer.setClearColor("#FFF");
renderer.setSize(width, height);
this.scene = scene;
this.camera = camera;
this.renderer = renderer;
this.material = material;
this.sphere = sphere;
this.geometry = geometry;
this.mouse = new THREE.Vector2();
this.raycaster = new THREE.Raycaster();
}
...
clickHandler = event => {
const mainEl = document.getElementById("mainBlock");
const rect = mainEl.getBoundingClientRect();
this.mouse.x = (event.clientX - rect.left) / mainEl.clientWidth * 2 - 1;
this.mouse.y = -((event.clientY - rect.top) / mainEl.clientHeight) * 2 + 1;
this.raycaster.setFromCamera(this.mouse, this.camera);
const intersects = this.raycaster.intersectObject(this.sphere);
if (intersects.length !== 0) {
...
}
};
render() {
<div
id="mainBlock"
style={{ width: "400px", height: "400px" }}
ref={mount => {
this.mount = mount;
}}
onClick={this.clickHandler}
>
...
</div>
}
}