Skip to content

Basic

The simplest example of loading a Teleport capture with teleport.js. It includes a simple css/js animated spinner to show during the first loading of the Level of Detail chunks and uses THREE.js OrbitControls to provide simple navigation in the scene.

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 capture = await teleportManager.loadCapture("524ee89f293a4a2e907009191ba7b9f4");

      if (capture.startingCamera)
        capture.startingCamera.applyTo(camera);
      camera.lookAt(0, 0, 0);

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

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