master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webxr_vr_panorama_depth.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D vr - panorama with depth</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>
    <div id="container"></div>

    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> vr - panorama with depth<br />
      Created by <a href="https://orfleisher.com" target="_blank" rel="noopener">@juniorxsound</a>. Panorama from <a href="https://krpano.com/examples/?depthmap" target="_blank" rel="noopener">krpano</a>.
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';
      import { VRButton } from './jsm/webxr/VRButton.js';

      let camera, scene, renderer, sphere, clock;

      init();
      animate();

      function init() {

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

        clock = new v3d.Clock();

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0x101010);

        const light = new v3d.AmbientLight(0xffffff, 1);
        scene.add(light);

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 2000);
        scene.add(camera);

        // Create the panoramic sphere geometery
        const panoSphereGeo = new v3d.SphereBufferGeometry(6, 256, 256);

        // Create the panoramic sphere material
        const panoSphereMat = new v3d.MeshStandardMaterial({
          side: v3d.BackSide,
          displacementScale: - 4.0
        });

        // Create the panoramic sphere mesh
        sphere = new v3d.Mesh(panoSphereGeo, panoSphereMat);

        // Load and assign the texture and depth map
        const manager = new v3d.LoadingManager();
        const loader = new v3d.TextureLoader(manager);

        loader.load('./textures/kandao3.jpg', function(texture) {

          texture.minFilter = v3d.NearestFilter;
          texture.generateMipmaps = false;
          sphere.material.map = texture;

        });

        loader.load('./textures/kandao3_depthmap.jpg', function(depth) {

          depth.minFilter = v3d.NearestFilter;
          depth.generateMipmaps = false;
          sphere.material.displacementMap = depth;

        });

        // On load complete add the panoramic sphere to the scene
        manager.onLoad = function() {

          scene.add(sphere);

        };

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.xr.enabled = true;
        renderer.xr.setReferenceSpaceType('local');
        container.appendChild(renderer.domElement);

        document.body.appendChild(VRButton.createButton(renderer));

        //

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

      }

      function onWindowResize() {

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

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

      }

      function animate() {

        renderer.setAnimationLoop(render);

      }

      function render() {

        // If we are not presenting move the camera a little so the effect is visible

        if (renderer.xr.isPresenting === false) {

          const time = clock.getElapsedTime();

          sphere.rotation.y += 0.001;
          sphere.position.x = Math.sin(time) * 0.2;
          sphere.position.z = Math.cos(time) * 0.2;

        }

        renderer.render(scene, camera);

      }

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