以最简单的方式实现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())
}
}
注:重点处理柱状图的坐标包含或者等于你的相机的坐标。