Threejs实现全景图功能

可以利用Threejs中的立方体或者球体实现全景图功能，把立方体或球体当成天空盒子，将无缝衔接的图片贴上，看起来就像在一个场景中，相机一般放置在中央，只要离边缘足够远就看不出是立方体或球体，但如果超出边界就能看到他们。Threejs也有官方的全景图实例:

https://threejs.org/examples/?q=pano#webgl_panorama_cube

https://threejs.org/examples/?q=pano#css3d_panorama

下面的实现代码在以上实例webgl_panorama_cube的基础上修改，去掉了OrbitControls对视角的控制，改用鼠标拖动事件控制天空盒的旋转，鼠标滚轮控制相机的FOV。

1、立方体实现

立方体6个面要贴上6个方向的图片，这6个图片如下所示

图片加载的顺序是正X(px.jpg)，负X(nx.jpg)，正Y(py.jpg)，负Y(ny.jpg)，正Z(pz.jpg)和负Z(nz.jpg)，将他们分别赋给6个材质的贴图，然后作为立方体skyBox的材质，因为相机在skyBox的内部，而内部的面不会显示，所以要将X轴或者Z轴的放大倍数变为负数，这样才能看到内部，scale.z=-1时相当于将Z轴正向的面移到Z轴负方向上。

var materials = [];
var texturepx = new THREE.TextureLoader().load( 'cubetexture/px.jpg' );
materials.push( new THREE.MeshBasicMaterial( { map: texturepx} ) );
var texturenx = new THREE.TextureLoader().load( 'cubetexture/nx.jpg' );
materials.push( new THREE.MeshBasicMaterial( { map: texturenx} ) );	
var texturepy = new THREE.TextureLoader().load( 'cubetexture/py.jpg' );
materials.push( new THREE.MeshBasicMaterial( { map: texturepy} ) );
var textureny = new THREE.TextureLoader().load( 'cubetexture/ny.jpg' );
materials.push( new THREE.MeshBasicMaterial( { map: textureny} ) );
var texturepz = new THREE.TextureLoader().load( 'cubetexture/pz.jpg' );
materials.push( new THREE.MeshBasicMaterial( { map: texturepz} ) );
var texturenz = new THREE.TextureLoader().load( 'cubetexture/nz.jpg' );
materials.push( new THREE.MeshBasicMaterial( { map: texturenz} ) );

var skyBox = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), materials );
skyBox.geometry.scale( 1, 1, - 1 );

在鼠标按下的mousemove事件中旋转skyBox（也可以旋转相机视角），旋转速度可以