【自己写全景】TreeJs实现全景图

先附上两张成果图，我们的主要功能就是以上两个，实现全景图的浏览，将全景标记放在图上并实现属性查询。

注：并不是所有的图片都能当作全景图，可以到专门的网站下载全景图使用，有些拍摄的不好的全景图也会出现衔接的问题。

一.基本原理

我们可以把我们我们观察到的对象想象成一个球体，而全景图就是附在球体上的一张图片，我们通过鼠标移动来改变我们的视角，从而到达全景图的其他地方。

我估计将球体做的很小（如上面两张图）就是为了直观的看出这是一个球体。而通过特定的相机视角和 透视投影我们可以全景图尽可能少的发生变形。

当我们把视角，或者说相机的焦距稍稍变化一些，或者把球体的半径变大一些，我们就发现不了球体的存在，从而有身临其境的感觉。

还有一个功能是将我们特定的poi点标记在全景上，如下图，这也不是一个简单的问题，因为我们要在数据库中记录poi点的位置，然后跟随者我们全景图的变化位置要发生变化，这就涉及到了坐标转换的问题，我们在下面探讨。

一.参数初始化

在上一篇博客提到过要生成一个treejs场景的几个要素，在全景图中也无外乎这么几个（相机，渲染器，场景）。

1.1 初始化相机

我们要想让全景有更好的视觉效果所使用的相机最好是透视投影：这种投影模式旨在模仿人眼所看到的方式。它是用于渲染3D场景的最常用的投影模式。fov参数是视场角 人的视场角大致是30度到100度，这里设置75度左右。

        camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
        camera.target = new THREE.Vector3( 0, 0, 0 );

我们的标记不是三维元素，他的大小不需要随着我们的视角改变，所以我们使用正投影：在这种投影模式下，渲染图像中物体的大小与摄像机的距离无关，保持不变。这可以用于渲染2D场景和UI元素等等。

        cameraOrtho = new THREE.OrthographicCamera( - window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, - window.innerHeight / 2, 1, 10 );
        cameraOrtho.position.z = 10;

1.2 初始化场景

场景也要初始化两个：

        scene = new THREE.Scene();
        sceneOrtho = new THREE.Scene();

1.3 全景初始化

创建容纳全景的球形集合体：

        mesh = new THREE.Mesh( new THREE.SphereGeometry( 2, 60, 40 ),
            new THREE.MeshBasicMaterial(
                { map: THREE.ImageUtils.loadTexture( 'textures/pano-1.jpg' ) }
            ) );
        mesh.scale.x = -1;
        scene.add( mesh );

第一个参数是半径，必须大于1小于某个数，第二三个参数为经纬度切片数，值太小全景图会变形，值越大越精细，但是会影响性能

1.4 创建渲染器

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.autoClear = false;
        container.appendChild( renderer.domElement );

1.5 初始化动画

    function animate() {
        requestAnimationFrame( animate );
        renderer.clear();
        renderer.render( scene, camera );
    }

二.实现移动视角

2.1 事件监听

对dom和window进行事件监听

        document.addEventListener( 'mousedown', onDocumentMouseDown, false );
        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
        window.addEventListener( 'resize', onWindowResize, false );

2.2 鼠标按下事件

    function onDocumentMouseDown( event ) {
        event.preventDefault();
        isUserInteracting = true;
        onPointerDownPointerX = event.clientX;
        onPointerDownPointerY = event.clientY;
        onPointerDownLon = lon;
        onPointerDownLat = lat;
    }

isUserInteracting 用于标识用户是否按下鼠标，记录下此时鼠标的屏幕坐标和初始经纬度。

注意这个经纬度不是传统意义上的经纬度，是我们模仿地球经纬度虚拟出的一个坐标，用于标记球体上的任意位置，方便计算。

2.3 鼠标移动，弹起事件

由鼠标移动的距离来计算屏幕中心移动的经纬度。

    function onDocumentMouseMove( event ) {

        if ( isUserInteracting ) {
            lon = ( onPointerDownPointerX - event.clientX ) * 0.1