标签：body 转换成 threejs const pos window 坐标 document vec

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。