threejs 世界坐標轉化為屏幕坐標

網站： 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);