網站： 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 世界坐標轉化為屏幕坐標