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