屏幕坐标转换成threejs的坐标

使用场景：当我们点击屏幕时获取的坐标和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都是如此。

标签：body,转换成,threejs,const,pos,window,坐标,document,vec
来源： https://blog.csdn.net/weixin_44136421/article/details/122582576