JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script id="vs" type="x-shader/x-vertex">#version 300 es
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

in vec3 position;
in vec2 uv;

out vec2 vUv;

void main() {
 		vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<script id="fs" type="x-shader/x-fragment">#version 300 es
precision mediump float;
uniform sampler2D texture1;

in vec2 vUv;
out vec4 outColor;
void main() {
    outColor = texture( texture1, vUv );
    //outColor = vec4( 1, 0, 0, 1 );
}
</script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.z = 2;
		
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
		
    // geometry
    var positions = [
			0, 0, 0,
			1, 0, 0,
			1, 1, 0,
			1, 1, 0,
			0, 1, 0,
			0, 0, 0
		];
		
		var uvs = [
			0, 0,
			1, 0,
			1, 1,
			1, 1,
			0, 1,
			0, 0
		];

		var geometry = new THREE.BufferGeometry();
		var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
		var uvAttribute = new THREE.Float32BufferAttribute( uvs, 2 );
		
		geometry.addAttribute( 'position', positionAttribute );
		geometry.addAttribute( 'uv', uvAttribute );

		// material
		
		var loader = new THREE.TextureLoader();
		var texture = loader.load( 'https://threejs.org/examples/textures/crate.gif' );


		var material = new THREE.RawShaderMaterial( {
				uniforms: {
					texture1: { value: texture }
				},
				vertexShader: document.getElementById( 'vs' ).textContent,
				fragmentShader: document.getElementById( 'fs' ).textContent
		} );

		var mesh = new THREE.Mesh( geometry, material );
		scene.add(mesh);


		var canvas = document.createElement('canvas');
		var context = canvas.getContext('webgl2');
		
		renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
		renderer.setPixelRatio( window.devicePixelRatio);
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild(renderer.domElement);

		window.addEventListener('resize', onWindowResize, false);
		
		var controls = new THREE.OrbitControls( camera, renderer.domElement );
}

function onWindowResize() {

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

function animate() {
    requestAnimationFrame(animate);
		
    renderer.render(scene, camera);
}