方法: Threejs の立方体または球体を使用してパノラマ機能を実装し、立方体または球体をスカイ ボックスとして扱い、シームレスな写真を貼り付けることで、通常はカメラが中央に配置されたシーン内にあるように見えます。 。
three.js 中国語 Web サイト
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 つの面を 1 つの図に結合しています。このような図は、球を使用するコードによって実装することもできます
。
<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>
画像保存場所：
効果デモ：
