Three.js加载360全景图片/视频

Three.js加载360全景图片/视频

效果

原理

• 将全景图片/视频作为texture引入到three.js场景中
• 将贴图与球形网格模型融合，将球模型当做成环境容器使用
• 处理视频时需要以dom为载体，加载与控制视频动作
• 每次渲染时更新当前texture，以达到视频播放效果
• 全景图片加载有球体与正方体两种模式，区别在于是加载单张图片还是多张图片

核心方法

      // 添加VR全景图
      const addVrPicture = async () => {
        // 创建贴图
        const loader = new THREE.TextureLoader();
        const texture = await loader.load('./img/vr.jpg');
        texture.wrapS = THREE.RepeatWrapping;
        texture.repeat.x = -1;
        // 创建球形载体
        const sphereGeometry = new THREE.SphereGeometry(200, 60, 40);
        const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });
        const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        scene.add(sphere);
      };

      // 添加VR全景视频
      const addVrVideo = async () => {
        // 通过Dom引入并控制视频源
        const video = document.createElement('video');
        video.src = './video/vr.mp4';
        video.loop = true;
        video.muted = true;
        video.autoplay = true;
        // 创建视频贴图
        const texture = new THREE.VideoTexture(video);
        texture.minFilter = THREE.LinearFilter;
        // 创建球形载体
        const sphereGeometry = new THREE.SphereGeometry(200, 60, 40);
        const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });
        const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        scene.add(sphere);
        // 添加动画序列
        animationList.push(() => {
          // 更新视频纹理
          // 播放视频
          video.play();
          if (video.readyState === video.HAVE_ENOUGH_DATA) {
            texture.needsUpdate = true;
          }
        });
        // 调整相机视角
        const point = new THREE.Vector3(200, 0, 0);
        camera.lookAt(point);
      };
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

完整代码

  
    
    
    
    
  
  
    
  


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
87
88
89
90
91
92
93
94
95
96
97