球体全景图

演示 http://csworld.cc:3005/Panorama_Sphere.html

全景图片一般有两种实现方式，一是把图片贴到一个球体的表面，二是把全景图分成 6 张图片分别贴到一个正方体的 6 个面上。

在 Three.js 中把全景图片贴到球体的表面非常简单

var textureLoader = new THREE.TextureLoader();
textureLoader.load('powu.jpg', function (texture) {
    var material = new THREE.MeshBasicMaterial({map: texture});
    var sphere = new THREE.SphereGeometry(500, 60, 40);
    // 翻转 X 轴使所有的面都朝里（改变了法向量的方向）
    sphere.scale(-1, 1, 1);
    var mesh = new THREE.Mesh(sphere, material);
    scene.add(mesh);
});

相机在球体的中心默认指向 Z 轴负方向。下面的关键是通过移动鼠标来改变相机的朝向，可通过计算经纬度来计算相机的朝向。

coords.png

如图球面上任意一个点 A 在赤道面上的投影 为 B， OAB 与赤道平面的夹角是纬度(lat), OB 与水平轴的夹角是经度(lon)。 默认的经纬度为零 (lon=0, lat=0), 当我们移动鼠标时根据鼠标移动的距离改变 lat, lon 的值，然后再根据 lat, lon 计算出 A 点的坐标，让相机指向 A 就行了。