快捷導(dǎo)航

three.js實現(xiàn)vr全景圖功能實例(vue)

更新時間：2024年05月07日 10:03:39 作者：拾荒舊痕

去年全景圖在微博上很是火爆了一陣,正好我也做過一點全景相關(guān)的項目,下面這篇文章主要給大家介紹了關(guān)于three.js實現(xiàn)vr全景圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1、立方體實現(xiàn)

立方體6個面要貼上6個方向的圖片，這6個圖片如下所示：

實現(xiàn)代碼如下：

<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`) // 這里圖片的地址默認(rèn)位置在public文件下方，所以測試的圖片直接添加在public文件夾內(nèi)部即可
        boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture }))
      })
      const cube = new THREE.Mesh(geometry, boxMaterials)
      // 改變視角，進入立方體內(nèi)部
      cube.geometry.scale(1, 1, -1)
      // 放置到場景上面
      scene.add(cube) 
      // 添加控制器，實現(xiàn)視角的縮放，旋轉(zhuǎn)
      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、球體實現(xiàn)

下面這張圖片將6個面合成到一張圖片中，這樣的圖片也可以由球體來實現(xiàn)

代碼實現(xiàn)：

<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()
      // 這里圖片的地址默認(rèn)位置在public文件下方，所以測試的圖片直接添加在public文件夾內(nèi)部即可
      let texture = new THREE.TextureLoader().load('./images/prefix.jpg')
      meterial.map = texture
      const sphere = new THREE.Mesh(geometry, meterial)
      // 改變視角，進入球體內(nèi)部
      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>

圖片的存放位置：