方法: 可以利用Threejs中的立方體或者球體實現(xiàn)全景圖功能，把立方體或球體當成天空盒子，將無縫銜接的圖片貼上，看起來就像在一個場景中，相機一般放置在中央。
three.js中文網(wǎng)
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`) // 這里圖片的地址默認位置在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>
圖片的存放位置：
效果演示：
houseMovie
2、球體實現(xiàn)
下面這張圖片將6個面合成到一張圖片中，這樣的圖片也可以由球體來實現(xiàn)
代碼實現(xiàn)：文章來源：http://www.zghlxwxcb.cn/news/detail-651122.html
<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文件夾內(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>
圖片的存放位置：
效果演示：
文章來源地址http://www.zghlxwxcb.cn/news/detail-651122.html
到了這里，關(guān)于three.js實現(xiàn)vr全景圖(vue)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
