JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<video crossorigin="anonymous" controls id="source" autoplay loop style="display:none" playsinline>
    <source src="https://cdn.glitch.com/2f484e40-3ae2-4ff4-bf64-4b7e86cdda2c%2Fsea.mp4?1558661108611">
  </video>

CSS

body {
	  margin: 0;
}

JavaScript

let camera, scene, renderer;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
    camera.position.z = 25;

    scene = new THREE.Scene();
		
		var spline = new THREE.CatmullRomCurve3( [new THREE.Vector3(25.671594486426034, 10.147294482535496, 0),
	new THREE.Vector3(0.744591686677959, 22.918695883260984, 0),
	new THREE.Vector3(-4.570059365102208, 8.821534782182425, 0),
	new THREE.Vector3(-19.1892659395564, 24.556826816858376, 0),
	new THREE.Vector3(18.61278140798425, 29.571388563075903, 0)] , true);
	//	spline.closed = true
		const points = spline.getPoints( 64 );
		const shape = new THREE.Shape( points );

    const geometry = new THREE.ShapeGeometry( shape );
    geometry.computeBoundingBox();

var max = geometry.boundingBox.max,
    min = geometry.boundingBox.min;
var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
var faces = geometry.faces;

geometry.faceVertexUvs[0] = [];

for (var i = 0; i < faces.length ; i++) {

    var v1 = geometry.vertices[faces[i].a], 
        v2 = geometry.vertices[faces[i].b], 
        v3 = geometry.vertices[faces[i].c];

    geometry.faceVertexUvs[0].push([
        new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
        new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
        new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
    ]);
}
geometry.uvsNeedUpdate = true;

  

    const mesh = new THREE.Mesh( geometry );
    scene.add( mesh );


 video = document.getElementById("source");
  video.crossOrigin = 'anonymous';
  document.addEventListener("click", function(){
		video.play();
  })
  document.addEventListener("touchstart", function(){
		video.play();//for mobile devices
  })
  
  logger = document.getElementById("logger");
  // Not available in r54
  texture = new THREE.VideoTexture(source);

  var mat = new...