master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_video_panorama_equirectangular....

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - equirectangular video panorama</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
    <style>
      body {
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - video panorama
    </div>

    <div id="container"></div>

    <video id="video" loop muted crossOrigin="anonymous" playsinline style="display:none">
      <source src="textures/pano.webm">
      <source src="textures/pano.mp4">
    </video>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      let camera, scene, renderer;

      let isUserInteracting = false,
        lon = 0, lat = 0,
        phi = 0, theta = 0,
        onPointerDownPointerX = 0,
        onPointerDownPointerY = 0,
        onPointerDownLon = 0,
        onPointerDownLat = 0;

      const distance = 50;

      init();
      animate();

      function init() {

        const container = document.getElementById('container');

        camera = new v3d.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);

        scene = new v3d.Scene();

        const geometry = new v3d.SphereBufferGeometry(500, 60, 40);
        // invert the geometry on the x-axis so that all of the faces point inward
        geometry.scale(- 1, 1, 1);

        const video = document.getElementById('video');
        video.play();

        const texture = new v3d.VideoTexture(video);
        const material = new v3d.MeshBasicMaterial({ map: texture });

        const mesh = new v3d.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        document.addEventListener('pointerdown', onPointerDown, false);
        document.addEventListener('pointermove', onPointerMove, false);
        document.addEventListener('pointerup', onPointerUp, false);

        //

        window.addEventListener('resize', onWindowResize, false);

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      function onPointerDown(event) {

        isUserInteracting = true;

        onPointerDownPointerX = event.clientX;
        onPointerDownPointerY = event.clientY;

        onPointerDownLon = lon;
        onPointerDownLat = lat;

      }

      function onPointerMove(event) {

        if (isUserInteracting === true) {

          lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
          lat = (onPointerDownPointerY - event.clientY) * 0.1 + onPointerDownLat;

        }

      }

      function onPointerUp() {

        isUserInteracting = false;

      }

      function animate() {

        requestAnimationFrame(animate);
        update();

      }

      function update() {

        lat = Math.max(- 85, Math.min(85, lat));
        phi = v3d.MathUtils.degToRad(90 - lat);
        theta = v3d.MathUtils.degToRad(lon);

        camera.position.x = distance * Math.sin(phi) * Math.cos(theta);
        camera.position.y = distance * Math.cos(phi);
        camera.position.z = distance * Math.sin(phi) * Math.sin(theta);

        camera.lookAt(0, 0, 0);

        renderer.render(scene, camera);

      }

    </script>
  </body>
</html>