Camera Path
Generates a flythrough camera path from the capture's input camera poses. Can be used to showcase indoor and outdoor captures.
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 Camera Path 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.3/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(40, 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("260750bd148f45a4a22d141a2b887e09");
const cameras = await capture.loadCameras();
const cameraPath = new TELEPORT.CameraPath({ camera: camera, cameras: cameras, capture: capture });
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
renderer.setAnimationLoop(() => {
cameraPath.evaluatePath();
renderer.render(scene, camera);
});
</script>
</body>
</html>