Three.js 世界坐标转化为屏幕坐标

Question

方法 .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);