JPEG Three.js Texture Loader

Working on Chrome, OSX, and Firefox.

by dustinkerstein

HTML

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

JavaScript

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

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();

function loadTextures() {
  for (var i = 0; i < numFrames; i++) {
  	var filename = "https://files.panomoments.com/jpeg/" + pad(i+1, 3) + ".jpg";
    textures[i] = new THREE.TextureLoader().load( filename );
    textures[i].minFilter = THREE.LinearFilter;
		textures[i].format = THREE.RGBFormat;
  }
	renderer.animate(render);
}

function render() {
	if (textures[index]) {
  	mesh.material.map = textures[index];
  }
	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;
}