在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果_vue 拼接2.5d 3d插画

在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86