前言：
目前大家对“js坐标转换”大约比较关怀，大家都想要学习一些“js坐标转换”的相关内容。那么小编在网上网罗了一些关于“js坐标转换””的相关知识，希望朋友们能喜欢，你们快快来学习一下吧！Threejs全称是“Javascript 3D library”。WebGL则是openGL在浏览器上的一个实现。Threejs对WebGL进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下轻松进行web 3D开发，简单易用。
三维开发中最常用的是三维坐标和二维坐标的转换，比如说：给一个三维模型中动态赋予一个文字标签进行展示，以前使用OpenGL处理起来比较麻烦，使用Threejs就简单了很多。
关键一步：vector.project(camera) ，表示将该三维坐标投影到视角相机平面上，变成一个二维坐标，结果为一个单位向量（标准向量），返回的结果是世界坐标worldVector在camera相机对象矩阵变化下对应的标准设备坐标， 标准设备坐标xyz的范围是[-1,1]。
因为canvas画布是全屏状态，完全填充浏览器窗口的客户区，canvas画布的宽高尺寸就是window.innerWidth、window.innerHeight。 画布的中心从屏幕坐标系的角度看是坐标是(window.innerWidth/2,window.innerHeight/2),从WebGL标准设备坐标系的角度看是坐标原点(0,0)。
var vector = worldVector.project(camera);//通过世界坐标获取转标准设备坐标 var w = window.innerWidth / 2; var h = window.innerHeight / 2; var x = Math.round(vector.x *w + w);//标准设备坐标转屏幕坐标 var y = Math.round(-vector.y * h + h);
3D坐标转换成2D坐标，是一种降维度操作，统称为投影。
同理使用函数vector.unproject(camera)则可以从屏幕2d坐标转换为3d空间坐标，
var vector = new THREE.Vector3(mX, mY, 0.5 );//这里定义深度值为0.5
//将鼠标坐标转换为3D空间坐标
vector.unproject(camera);
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js坐标转换
