Skip to content

Multi Capture

Loads two Teleport captures into a single scene at the same time. Each capture is offset along the X axis and animated bobbing up and down out of phase with the other, showing that multiple captures can be managed independently within one renderer.

Source Code#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>Teleport.js Basic Sample</title>
    <style>
      body { margin: 0; overflow: hidden; background: #222; }
      canvas { display: block; width: 100vw; height: 100vh; }
    </style>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
          "teleport": "https://d1ziouw89q7sp5.cloudfront.net/teleport-js/0.0.2/teleport.module.js"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
      import * as THREE from "three";
      import * as TELEPORT from "teleport";

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
      const renderer = new THREE.WebGLRenderer({ antialias: false, logarithmicDepthBuffer: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      document.body.appendChild(renderer.domElement);

      const teleportManager = new TELEPORT.Manager({ renderer: renderer, scene: scene, camera: camera });

      const captureA = await teleportManager.loadCapture("7e1ea65c804544a3b4ad66faf52838c7");
      const captureB = await teleportManager.loadCapture("7e1ea65c804544a3b4ad66faf52838c7");

      camera.position.set(-1.6,2,-5);
      camera.lookAt(0, 0.3, 0);

      const baseY = captureA.mesh.position.y;
      const amplitude = 0.2;
      const frequency = 0.4;
      const spacing = 1.0;

      window.addEventListener("resize", () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });

      const clock = new THREE.Clock();

      renderer.setAnimationLoop(() => {
        const t = clock.getElapsedTime();

        captureA.mesh.position.x = spacing;
        captureB.mesh.position.x = -spacing;

        captureA.mesh.position.y = baseY + amplitude * Math.sin(frequency * t);
        captureB.mesh.position.y = baseY + amplitude * Math.sin(frequency * t + Math.PI);

        renderer.render(scene, camera);
      });
    </script>
  </body>
</html>