码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-06 12:34:22      阅读:364      评论:0      收藏:0      [点我收藏+]

标签:代码   图片   www   rgba   tle   can   程序   坐标   course   

网站: 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 世界坐标转化为屏幕坐标

标签:代码   图片   www   rgba   tle   can   程序   坐标   course   

原文地址:https://www.cnblogs.com/lst619247/p/9144009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!