ThetaVideoViewer.js

'use strict';

const THREE = require('three');
const OrbitControls = require('three-orbit-controls')(THREE);

const width = window.innerWidth;
const height = window.innerHeight;
const scene = new THREE.Scene();
const sphereGeo = new THREE.SphereGeometry(10, 120, 80);
const video = document.createElement('video');

sphereGeo.scale(-1, 1, 1);
video.width = 640;
video.height = 360;
video.autoplay = true;
video.loop = true;
video.src = './movie/theta1.mp4';

const texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;

const material = new THREE.MeshBasicMaterial({map: texture});

const sphere = new THREE.Mesh(sphereGeo, material);
scene.add(sphere);

const camera = new THREE.PerspectiveCamera(75, width / height, 1, 2000);
camera.position.set(0, 0, 0.1);
camera.lookAt(sphere.position);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor({color: 0x000000});
document.getElementById('stage').appendChild(renderer.domElement);
renderer.render(scene, camera);

const controls = new OrbitControls(camera, renderer.domElement);

render();

function render() {
  requestAnimationFrame(render);
  window.addEventListener('resize', onWindowResize, false);
  renderer.render(scene, camera);
  controls.update();
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}