JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
			<source src="https://threejs.org/examples/textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
			<source src="https://threejs.org/examples/textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<div id="app"></div>

CSS

html,
body,
#app {
  margin: 0;
  padding: 0
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Babel + JSX

video.volume = 0.1;
let container = document.querySelector("#app")
let camera = new THREE.PerspectiveCamera(60, 1, 1, 5000)
let scene = new THREE.Scene()
let renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setClearColor(0x404040);

let plane = new THREE.Mesh(
  new THREE.PlaneGeometry(500, 500),
  new THREE.ShaderMaterial({
    uniforms: {
      tex: {
        value: new THREE.VideoTexture( video )
      }
    },
    side: THREE.DoubleSide,
    vertexShader: `
      varying vec2 vUv;
      
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      varying vec2 vUv;
      uniform sampler2D tex;
      
      void main() {
      	vec2 uv = vUv;
        float ratio = 16. / 9.; //480./204.;
        uv.y *= ratio;
        
        uv.y -= (0.5 - (1. / ratio) * 0.5) * ratio;
   			
        vec3 col = texture2D(tex, uv).rgb;
        
        col = mix(col, vec3(0), step(0.5, abs(uv.y - 0.5)));
        
        gl_FragColor = vec4(col, 1.);
      }
    `
  })
)

function onWindowResize() {
  let { clientWidth: cw, clientHeight: ch } = container
  camera.aspect = cw / ch
  camera.updateProjectionMatrix()
  renderer.setSize(cw, ch)
}

onWindowResize()
window.addEventListener("resize", onWindowResize)

container.appendChild(renderer.domElement)
scene.add(camera)
scene.add(plane)
camera.lookAt(new THREE.Vector3(0, 0, -1))
plane.position.set(0, 0, -500)



let animate = () => {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}

animate()