欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

屏幕坐标转换成threejs的坐标

程序员文章站 2022-05-01 12:42:34
...

使用场景:当我们点击屏幕时获取的坐标和three的坐标不一样时,这时候就需要转换。

	const convertCoodsToThree = (mouseX, mouseY, mouseZ = 0) => {
    const x = (mouseX / window.innerWidth) * 2 - 1;
    const y = -(mouseY / window.innerHeight) * 2 + 1;
    var vec = new THREE.Vector3(); 
    var pos = new THREE.Vector3();
    vec.set(x, y, 0.5);
    vec.unproject(camera.current);
    vec.sub(camera.current.position).normalize();
    var distance = (mouseZ - camera.current.position.z) / vec.z;
    pos.copy(camera.current.position).add(vec.multiplyScalar(distance));
    return [pos.x, pos.y, pos.z];
  };

PS:项目框架为react ;
window.innerHeight/window.innerWidth:表示的是浏览器正文可见区域的高度和宽度。
window.outerHeight和window.outerWidth:表示的是浏览器可见区域。
document.body.scrollTop/document.body.scrollLeft:表示的是水平和垂直滚动条滚动的距离。

document.body.scrollTop + window.innerHeight(document.body.clientHeight) = document.body.scrollHeight
document.body.scrollLeft + window.innerWidth(document.body.clientWidth) = document.body.scrollWidth

判断一个滚动容器是否滚动容器底部

element.scrollHeight - element.scrollTop == element.clientHeight

如果threejs渲染区域在某一个div里面时;

const height=document.getElementsByClassName("canvas")[0].height;
   const width=document.getElementsByClassName("canvas")[0].width;

页面指定了DTD为DOCTYPE时,使用document.documentElement。
页面没有指定DTD 为DOCTYPE时,使用document.body。
IE和Firefox都是如此。