JPEG Three.js

Working on Chrome, OSX, and Firefox.

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<div id="container"></div>

JavaScript

var container, mesh, geometry, camera, scene, renderer, texture;
var index = 0;
var numFrames = 243;
var blobs = [];

container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
scene = new THREE.Scene();
geometry = new THREE.SphereBufferGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);
texture = new THREE.Texture();
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
scene.add(camera);
mesh = new THREE.Mesh(
  new THREE.PlaneGeometry(1920, 1080),
  new THREE.MeshBasicMaterial({
    map: texture
  }));
mesh.position.set(0, 0, -1000);
scene.add(mesh);
camera.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
loadTextures();
renderer.animate(render);

async function loadTextures() {
  for (var i = 0; i < numFrames; i++) {
    var url = "https://files.panomoments.com/jpeg/" + pad(i+1, 3) + ".jpg";
    const response = await fetch(url, {
      method: 'GET'
    });
    const arrayBuffer = await response.arrayBuffer();
    blobs[i] = window.URL.createObjectURL(new Blob([arrayBuffer], {type: "image/jpeg"}));                    
  }
}

function render() {
  if (blobs[index]) {
    var loader = new THREE.TextureLoader();
    loader.load( blobs[index], function ( texture ) {
      texture.minFilter = THREE.LinearFilter;
      texture.format = THREE.RGBFormat;
      mesh.material.map = texture;
    });
    index = (index + 1) % numFrames;
  }
  renderer.render(scene, camera);
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}