在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果
Vue3
代码如下(示例):
<template>
<div class="Create"></div>
</template>
<script>
import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
name: 'Create',
data () {
return {}
},
setup () {
// 1、创建场景和摄像机
const scene = new Three.Scene()
// 2、创建摄像机 PerspectiveCamera('视角', '指定投影窗口长宽比', '从距离摄像机多远开始渲染', '截止多远停止渲染100')
const camera = new Three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 2, 1000)
// 3、创建ThreeJs 渲染器
const renderer = new Three.WebGLRenderer({ antialias: true })
// 设置渲染器场景大小
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
debugger
// 创建几何模型 BoxGeometry('x轴', '轴', 'z轴')
const geometry = new Three.BoxGeometry(10, 10, 10)
// 创建纹理贴图 前后 上下 左右
const texture0 = new Three.TextureLoader().load(require('@/assets/imgs/1.png'))
const texture1 = new Three.TextureLoader().load(require('@/assets/imgs/2.png'))
const texture2 = new Three.TextureLoader().load(require('@/assets/imgs/3.png'))
const texture3 = new Three.TextureLoader().load(require('@/assets/imgs/4.png'))
const texture4 = new Three.TextureLoader().load(require('@/assets/imgs/5.png'))
const texture5 = new Three.TextureLoader().load(require('@/assets/imgs/6.png'))
// 添加材质
const material = [
new Three.MeshBasicMaterial({ map: texture0, side: Three.DoubleSide }),
new Three.MeshBasicMaterial({ map: texture1, side: Three.DoubleSide }),
new Three.MeshBasicMaterial({ map: texture2, side: Three.DoubleSide }),
new Three.MeshBasicMaterial({ map: texture3, side: Three.DoubleSide }),
new Three.MeshBasicMaterial({ map: texture4, side: Three.DoubleSide }),
new Three.MeshBasicMaterial({ map: texture5, side: Three.DoubleSide })
]
// 创建网格对象
const cube = new Three.Mesh(geometry, material)
// 添加到场景中去
scene.add(cube)
// 摄影机空间Z轴
camera.position.set(2, 0, 0)
camera.lookAt(scene.position)
// camera.position.z = 4
// 鼠标操作缩放
// eslint-disable-next-line no-new
new OrbitControls(camera, renderer.domElement)
// 添加帧渲染
const animate = () => {
requestAnimationFrame(animate)
// 渲染场景
renderer.render(scene, camera)
}
animate()
// 自适应
window.addEventListener('resize', () => {
// 初始化摄像机
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
// 初始化渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight)
})
}
}
</script>
Vue2
代码如下(示例):
<template>
<div id="Create"></div>
</template>
<script>
import * as Three from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
name: "Create",
components: {},
data() {
return {
scene: null,
camera: null,
renderer: null,
geometry: null,
// 添加材质
material: [
new Three.MeshBasicMaterial({
map: new Three.TextureLoader().load(require("../../../assets/img/1.png")),
side: Three.DoubleSide,
}),
new Three.MeshBasicMaterial({
map: new Three.TextureLoader().load(require("../../../assets/img/2.png")),
side: Three.DoubleSide,
}),
new Three.MeshBasicMaterial({
map: new Three.TextureLoader().load(require("../../../assets/img/3.png")),
side: Three.DoubleSide,
}),
new Three.MeshBasicMaterial({
map: new Three.TextureLoader().load(require("../../../assets/img/4.png")),
side: Three.DoubleSide,
}),
new Three.MeshBasicMaterial({
map: new Three.TextureLoader().load(require("../../../assets/img/5.png")),
side: Three.DoubleSide,
}),
new Three.MeshBasicMaterial({
map: new Three.TextureLoader().load(require("../../../assets/img/6.png")),
side: Three.DoubleSide,
}),
],
cube: null,
};
},
methods: {
init() {
this.scene = new Three.Scene();
this.camera = new Three.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
2,
1000
);
this.renderer = new Three.WebGLRenderer({ antialias: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("Create").appendChild(this.renderer.domElement);
this.geometry = new Three.BoxGeometry(10, 10, 10);
this.cube = new Three.Mesh(this.geometry, this.material);
this.scene.add(this.cube);
this.camera.position.set(2, 0, 0);
this.camera.lookAt(this.scene.position);
new OrbitControls(this.camera, this.renderer.domElement);
// 添加帧渲染
},
animate() {
requestAnimationFrame(this.animate);
// 渲染场景
this.renderer.render(this.scene, this.camera);
},
},
created() {},
mounted() {
this.init();
this.animate();
},
};
</script>
<style></style>