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);
      };

完整代码

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as util from './js/util.js';
      import * as THREE from './node_modules/three/build/three.module.js';
      import { creatWallByPath } from './js/effect.js';

      const scene = util.initScene();
      const stats = util.initStats();
      const camera = util.initCamera(-1, 0, 0);
      const renderer = util.initRender();
      const controls = util.initOrbitControls(camera, renderer);
      util.windowReSize(renderer, camera);
      util.addAxisHelper(scene, 100);
      util.addAmbientLight(scene);
      util.addDirectionalLight(scene);
      // 动画序列，每个渲染周期执行
      const animationList = [];

      // 添加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);
      };

      const main = async () => {
        // 添加VR图像
        await addVrPicture();
        // 添加VR视频
        // await addVrVideo();
      };

      // 渲染函数
      const render = () => {
        renderer.render(scene, camera);
        stats.update();
        animationList.forEach((callback) => callback());
        requestAnimationFrame(render);
      };

      window.onload = () => {
        main();
        render();
      };
    </script>
  </body>
</html>
# javascript # 音视频 # 开发语言
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区