JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<button type="button" id="start-button">start</button>
<video id="video" crossOrigin="anonymous" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" loop style="display:none"></video>

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/GlitchPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://threejs.org/examples/js/shaders/DigitalGlitch.js'></script>
<script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

#start-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 100px;
}

JavaScript

let camera, scene, renderer, video, composer, mouse;

init();
animate();

const startButton = document.getElementById('start-button')
startButton.addEventListener('click', ()=> {
	video.play();
  startButton.style.display = 'none'
})

function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.set( 0, 0, 140 );
	camera.lookAt( 0, 0, 0 );	
  camera.layers.enable(1);
    
	scene = new THREE.Scene();
  
	loadModel();
      
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
  directionalLight.position.set(2, 2, 2);
  directionalLight.layers.enable(1);
  scene.add(directionalLight);
  
  video = document.getElementById( 'video' );
  const texture = new THREE.VideoTexture( video );
 	const plane = new THREE.Mesh(new THREE.PlaneGeometry(16 * 5, 9 * 5), new THREE.MeshBasicMaterial({map: texture}));
  plane.position.set(0,0,0);
  plane.layers.set(1);
  scene.add(plane);

  renderer = new THREE.WebGLRenderer();
	renderer.autoClear = false;
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
  
 	const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 0, 0 );
  setEffect()
  
  mouse = new THREE.Vector2();
  window.addEventListener("mousemove", function(event) {
    mouse.x = event.clientX
    mouse.y = event.clientY
  }, false)
}

function loadModel() {
	const loader = new THREE.GLTFLoader();
  loader.load( 'https://threejs.org/examples/models/gltf/Stork.glb', function ( gltf ) {
    const model = gltf.scene;
    gltf.scene.traverse( function ( child ) {
			child.scale.set(0.5, 0.5, 0.5)
	    child.position.set(20, -20, 20)
    })
    scene.add( model );
	});
}

function setEffect() {
  const renderModel = new THREE.RenderPass( scene, camera );
 const glitchPass = new THREE.GlitchPass();
 const shaderPass = new THREE.ShaderPass(  );

 composer = new THREE.EffectComposer( renderer...