JS 实现全景图预览-CSDN博客

WebGL（全称 Web Graphics Library）是一种 3D 绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。Three.js 是一款开源的主流 3D 绘图 JS 引擎，它就像 jQuery 简化了 HTML DOM 操作一样，可以简化 WebGL 编程。

一、Three.js 坐标介绍

三维空间中主要有两种几何变换，一种是位置的变换，位置变换和二维空间的是一样的，坐标值进行增减就可。另一种就是旋转变换，二维空间的旋转可以看作是围绕点的旋转，只能基于平面上某个点为圆心进行旋转，而三维空间的旋转则是围绕一条线旋转的，有多个方向。Three.js 是自持旋转矩阵，欧拉角，四元数这三种旋转方式。

对于三维转换空间的坐标系，我的理解就是可以分为：世界坐标系、屏幕坐标系。世界坐标系就是空间坐标系，屏幕坐标系就是我们看到的平面上的坐标系，其实应该有个中间过度的坐标系，就是标准设备坐标系 [-1,1]，通过现有的数据处理函数来进行转换，这个只是个人理解，可能有偏差。下面就介绍如何进行世界坐标系和屏幕坐标系的转换。

屏幕坐标转世界坐标：

屏幕坐标是从左上角为原点，这里全景展示设备坐标是以画布的中心为原点，需要处理一下，得到相机坐标。

    function convertTo3DCoordinate(clientX,clientY){
        var mv = new THREE.Vector3(
            (clientX / window.innerWidth) * 2 - 1,
            -(clientY / window.innerHeight) * 2 + 1,
            0.5 );  //0.5可以改变，改变后获得的threejs坐标的x,y，z数值上会改变，但是差值上不会改变
        mv.unproject(this.camera);   //用相机反投影该向量  这个地方我的理解就是设备坐标[-1,1]转化为世界坐标，这个函数实现的是先将设备坐标转换为齐次坐标，之后与相机的MP矩阵的逆矩阵相乘。有兴趣的可以先看下线性代数。
        return mv;
    }
复制代码

世界坐标转屏幕坐标：

    function convertTo2DCoordinate() {
        //获取网格模型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 param = {}
        param.x = Math.round(standardVector.x * a + a);//标准设备坐标转屏幕坐标
        param.y = Math.round(-standardVector.y * b + b);//标准设备坐标转屏幕坐标
        return param
    }
    其中相机投影和反投影的源码为下：
    project: function () {
        var matrix = new Matrix4();
            return function project( camera ) {
            matrix.multiplyMatrices( camera.projectionMatrix, matrix.getInverse( camera.matrixWorld ) );
            return this.applyMatrix4( matrix );
        };
    }(),
    unproject: function () {
        var matrix = new Matrix4();
        return function unproject( camera ) {
            matrix.multiplyMatrices( camera.matrixWorld, matrix.getInverse( camera.projectionMatrix ) );
            return this.applyMatrix4( matrix );
        };
    }(),
复制代码

经纬度转化为空间坐标：

    //经、纬度   球体半径
    function lgltToxyz(longitude,latitude,radius){
            //返回角度转换成弧度之后的值
        var lg = degToRad(longitude) , lt = degToRad(latitude);
        var y = radius * Math.sin(lt);
        var temp = radius * Math.cos(lt);
        var x = temp * Math.sin(lg);
        var z = temp * Math.cos(lg);