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

最新推荐文章于 2025-07-10 05:40:09 发布

转载最新推荐文章于 2025-07-10 05:40:09 发布 · 624 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lst619247/p/9144009.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了如何使用 Three.js 的 Vector3 对象方法 project 进行坐标转换，将三维世界坐标转换为屏幕坐标，以便在 canvas 画布上正确显示三维模型的标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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