Three.js 全景图

Question

通过 Three.js 引擎可以很容易实现全景图的解析，通过 Threejs 解析渲染全景图，本质上就是把全景图作为 Three.js 立方体或球体的纹理贴图。

球体全景图

一张全景图表示一个全景效果，可以把该全景图作为一个球体的纹理贴图就可以实现，不过要注意设置球体的内面可见，一般 Threejs 系统默认网格模型的前面(外面)可见，具体点说也就是设置材质对象的 side 属性。

在解析全景图的时候，一般使用透视投影相机对象，透视投影是符合实际生活中人眼的观察效果，相机对象要放在球体里面，如果放在外面就相当于看一个球体，放在球体里面才会产生一个全景效果。

var Sphere = new THREE.SphereGeometry( 25,50,50 );
// MeshPhongMaterial、MeshLambertMaterial光照会产生不连贯的棱角感
// 使用不用光照影响的基础网格材质MeshBasicMaterial
var material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  //注意背面显示
  side:THREE.BackSide,
});
var mesh = new THREE.Mesh(Sphere, material);
// 设置材质对象的纹理贴图
var textureLoader = new THREE.TextureLoader();
mesh.material.map = textureLoader.load('全景图.jpg');

透视投影相机对象设置

/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
//设置相机位置，该参数位置比较重要
// 实际调试的时候，可以先随意给一个值，然后滚动鼠标中键，调整到合适的值，然后控制台打印相机位置坐标。
camera.position.set(4.4, -0.517, -3.81);
camera.lookAt(scene.position);

立方体全景图

如果一个全景效果，提供了上下左右前后 6 个方向的 6 张全景图，可以通过一个立方体解析渲染全景图，把每一张图片作为一个立方体盒子上下左右前后六个面的颜色纹理贴图。

var box = new THREE.BoxGeometry(500, 500, 500);
// 6张全景图的名称
let pathArr = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']
// 声明一个数组，用来存储六张全景图对应的纹理对象Texture
let materialArr = []
pathArr.forEach(elem => {
  var textureLoader = new THREE.TextureLoader();
  var texture = textureLoader.load('环境贴图/'+elem);
  var material = new THREE.MeshBasicMaterial({
    map:texture,
    side:THREE.BackSide,
  });
  materialArr.push(material)
});
var mesh = new THREE.Mesh(box, materialArr);