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

Posted 2020-11-11 刘世涛619247

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