JSFiddle - React, Tailwind, and code Playground

by Horsetopus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var renderer;

var textureLoader;
var perspectiveScene, perspectiveCamera;
var planeTexture, planeMaterial, planeGeometry, plane;
var cubeTexture, cubeMaterial, cubeGeometry, cube;

function onResize( e ) {
	
	renderer.setSize( window.innerWidth, window.innerHeight );
  
  perspectiveCamera.aspect = window.innerWidth / window.innerHeight;
  perspectiveCamera.updateProjectionMatrix();
}

function render() {
	
	cube.rotation.x += 0.01;
  cube.rotation.z += 0.02;
	
  renderer.render( perspectiveScene, perspectiveCamera );
  
  requestAnimationFrame( render );
}

( function() {
	
	'use strict';
	
  
  
  perspectiveCamera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	
  perspectiveScene = new THREE.Scene();
  perspectiveScene.add( new THREE.AmbientLight( 0xFFFFFF ) );
	
  THREE.ImageUtils.crossOrigin = '';
  
  
  textureLoader = new THREE.TextureLoader();
  
  textureLoader.load( "https://threejsfundamentals.org/threejs/resources/images/wall.jpg", ( texture ) => {
  	
  	planeMaterial = new THREE.ShaderMaterial( {
      uniforms: {
        diffuseMap: { type: 't', value: texture },
      },
      vertexShader: `  
        varying vec2 vUv;
        void main() {
        	vUv = uv;
        	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
      `,
      fragmentShader: `  
        uniform sampler2D diffuseMap;
        varying vec2 vUv;
        void main() {
        	gl_FragColor = texture2D( diffuseMap, vUv );
				}
      `
    } );
    planeGeometry = new THREE.PlaneGeometry( 800, 400 );
    plane = new THREE.Mesh( planeGeometry, planeMaterial );
    plane.position.z = -500;
  
  	perspectiveScene.add( plane );
  } );
  
  
  
  cubeTexture = THREE.ImageUtils.loadTexture( "https://threejs.org/examples/textures/crate.gif" );
  cubeMaterial = new THREE.MeshStandardMaterial( { map:cubeTexture } );
  cubeGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
  cube = new THREE.Mesh(...