网站： http://www.yanhuangxueyuan.com/Three.js_course/screen.html

方法.project

   通过Vector3对象的方法project，方法的参数是相机对象，语句worldVector.project(camera);返回的结果是世界坐标worldVector在camera相机对象矩阵变化下对应的标准设备坐标， 标准设备坐标xyz的范围是[-1,1]。

   因为canvas画布是全屏状态，完全填充浏览器窗口的客户区，canvas画布的宽高尺寸就是window.innerWidth、window.innerHeight。 画布的中心从屏幕坐标系的角度看是坐标是(window.innerWidth/2,window.innerHeight/2),从WebGL标准设备坐标系的角度看是坐标原点(0,0). 对于初次接触WebGL的读者，如果不太清楚世界坐标系、屏幕坐标系、标准设备坐标系的区别可以不用深入理解，直接复制下面的代码会修改即可。

 ???/** ????* 网格模型添加标签 ????*/ ???function tag() { ???????/** ????????* 立方体世界坐标转屏幕坐标 ????????*/ ???????//获取网格模型boxMesh的世界坐标 ???????var worldVector = new THREE.Vector3( ???????????boxMesh.position.x, ???????????boxMesh.position.y, ???????????boxMesh.position.z ???????????); ???????var standardVector = worldVector.project(camera);//世界坐标转标准设备坐标 ???????var a = window.innerWidth / 2; ???????var b = window.innerHeight / 2; ???????var x = Math.round(standardVector.x * a + a);//标准设备坐标转屏幕坐标 ???????var y = Math.round(-standardVector.y * b + b);//标准设备坐标转屏幕坐标 ???????/** ????????* 更新立方体元素位置 ????????*/ ???????div.style.left = x + ‘px‘; ???????div.style.top = y -130 + ‘px‘; ???}

创建div元素

  在Javascript程序中创建html元素，并设置相关属性，可以学习本博客的HTML5部分教程。

 ???/** ????* 创建div元素(作为立方体标签) ????*/ ???var div = document.createElement(‘div‘); ???div.innerHTML = ‘立方体‘; ???div.style.padding = ‘5px‘; ???div.style.position = ‘absolute‘; ???div.style.backgroundColor = ‘rgba(155,0,155,0.8)‘; ???document.body.appendChild(div);

threejs 世界坐标转化为屏幕坐标

原文地址：https://www.cnblogs.com/lst619247/p/9144009.html