three.js实现vr全景图功能实例(vue)_Vue.js

方法: 可以利用threejs中的立方体或者球体实现全景图功能，把立方体或球体当成天空盒子，将无缝衔接的图片贴上，看起来就像在一个场景中，相机一般放置在中央。

1、立方体实现

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

实现代码如下：

<template>
  <div>
    <div class="container"></div>
  </div>
</template>

<script>
import * as three from 'three'
import { orbitcontrols } from 'three/examples/jsm/controls/orbitcontrols'
import { rgbeloader } from 'three/examples/jsm/loaders/rgbeloader'
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 获取容器
      const container = document.queryselector('.container')
      // 初始场景
      const scene = new three.scene()
      // 初始化相机
      const camera = new three.perspectivecamera(75, window.innerwidth / window.innerheight, 0.1, 1000)
      // 相机位置
      camera.position.z = 5
      // 初始化渲染器
      const renderer = new three.webglrenderer()
      renderer.setsize(window.innerwidth, window.innerheight)
      // 添加立方体
      const geometry = new three.boxgeometry(10, 10, 10)
      let arr = ['4_l', '4_r', '4_u', '4_d', '4_b', '4_f']
      let boxmaterials = []
      arr.foreach(item => {
        // 纹理加载
        let texture = new three.textureloader().load(`./house/${item}.jpg`) // 这里图片的地址默认位置在public文件下方，所以测试的图片直接添加在public文件夹内部即可
        boxmaterials.push(new three.meshbasicmaterial({ map: texture }))
      })
      const cube = new three.mesh(geometry, boxmaterials)
      // 改变视角，进入立方体内部
      cube.geometry.scale(1, 1, -1)
      // 放置到场景上面
      scene.add(cube) 
      // 添加控制器，实现视角的缩放，旋转
      const controls = new orbitcontrols(camera, container)
      // controls.enabledamping = true
      // 容器上面添加渲染器
      container.appendchild(renderer.domelement)
      // 逐帧渲染
      const circlerender = () => {
        renderer.render(scene, camera)
        requestanimationframe(circlerender)
      }
      circlerender()
    },
  }
}
</script>

<style>

</style>

图片的存放位置：

效果演示：

2、球体实现

下面这张图片将6个面合成到一张图片中，这样的图片也可以由球体来实现

代码实现：

<template>
  <div>
    <div class="container"></div>
  </div>
</template>

<script>
import * as three from 'three'
import { orbitcontrols } from 'three/examples/jsm/controls/orbitcontrols'
import { rgbeloader } from 'three/examples/jsm/loaders/rgbeloader'
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const container = document.queryselector('.container')
      // 初始场景
      const scene = new three.scene()
      // 初始化相机
      const camera = new three.perspectivecamera(75, window.innerwidth / window.innerheight, 0.1, 1000)
      // 相机位置
      camera.position.z = 5
      // 初始化渲染器
      const renderer = new three.webglrenderer()
      renderer.setsize(window.innerwidth, window.innerheight)
      // 添加球体方式一：对于.hdr图片
      // const geometry = new three.spheregeometry(5, 32, 32)
      // const loader = new rgbeloader()
      // // to do
      // loader.load('./images/prefix_hdr.hdr', (texture) => {
      //   const meterial = new three.meshbasicmaterial({ map: texture })
      //   const sphere = new three.mesh(geometry, meterial)
      //   sphere.geometry.scale(1, 1, -1)
      //   scene.add(sphere)
      // })

      // 添加球体方式二：对于.jpg .png图片
      const geometry = new three.spheregeometry(5, 32, 32)
      const meterial = new three.meshbasicmaterial()
      // 这里图片的地址默认位置在public文件下方，所以测试的图片直接添加在public文件夹内部即可
      let texture = new three.textureloader().load('./images/prefix.jpg')
      meterial.map = texture
      const sphere = new three.mesh(geometry, meterial)
      // 改变视角，进入球体内部
      sphere.geometry.scale(1, 1, -1)
      scene.add(sphere)
      // 添加控制器，控制视角
      const controls = new orbitcontrols(camera, container)
      // controls.enabledamping = true
      // 容器上面添加渲染器
      container.appendchild(renderer.domelement)
      // 逐帧渲染
      const circlerender = () => {
        renderer.render(scene, camera)
        requestanimationframe(circlerender)
      }
      circlerender()
    },
  }
}
</script>

<style>

</style>

图片的存放位置：