基于three.js构建3D全景图

以最简单的方式实现3D全景色

import * as THREE from 'three'
import {OrbitControls} from './OrbitControls'

export class Panorama {
  constructor (renderer, camera, scene) {
    this.renderer = renderer
    this.camera = camera
    this.scene = scene
    this.init()
  }

  init () {
    this.initRenderer()
    this.initScene()
    this.initCamera()
    this.initGeometry()
    this.initControls()
  }

  initRenderer () {
    this.renderer = new THREE.WebGLRenderer()
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(this.renderer.domElement)
  }

  initScene () {
    this.scene = new THREE.Scene()
  }

  initCamera () {
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    this.camera.position.z = 800
  }

  initGeometry () {
    const geometry = new THREE.BoxGeometry(800, 800, 800)
    const textureLoader = new THREE.TextureLoader()
    const imgArr = [
      require('../assets/posx.jpg'),
      require('../assets/negx.jpg'),
      require('../assets/posy.jpg'),
      require('../assets/negy.jpg'),
      require('../assets/posz.jpg'),
      require('../assets/negz.jpg')
    ]
    let material = []
    for (let i = 0; i < imgArr.length; i++) {
      material.push(
        new THREE.MeshBasicMaterial({
          map: textureLoader.load(imgArr[i]), side: THREE.DoubleSide
        })
      )
    }

    const mesh = new THREE.Mesh(geometry, material)
    this.scene.add(mesh)
  }

  animate () {
    requestAnimationFrame(() => this.animate())
    this.renderer.render(this.scene, this.camera)
  }

  initControls () {
    const controls = new OrbitControls(this.camera, this.renderer.domElement)
    controls.addEventListener('change', this.animate())
  }
}

注:重点处理柱状图的坐标包含或者等于你的相机的坐标。