JSFiddle - React, Tailwind, and code Playground

by Darcy Paterson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>


	<div id="theDiv">

		<main id="mainHalf">

			<div id="optionOne" class="border">

				<a href="#">

					<h3>Move Camera</h3>

				</a>
				
			</div>

			<div id="optionTwo" class="border">

				<a href="#">

					<h3>Switch to First Person Shooter</h3>
          
				</a>
				
			</div>
			
		</main>

	</div>

</body>
</html>

CSS

html {

			background-color: lightblue;
			
		}

		body { margin: 0; background-color: lightblue; }

		canvas { grid-row: 1 / 6; grid-column: 1 / 6;}

		#theDiv {

			display: grid;
			grid-template-columns: 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw;
			grid-template-rows: 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh;

		}

		#mainHalf {

			grid-column: 3 / 9; 
			grid-row: 8 / 9;
			z-index: 20;
			display: flex;
			justify-content: space-around;
			align-items: center;


		}

		#mainHome {

			background-color: black;
			color: white;
			width: 10vw;
			height: 5vh;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;

		}

		.border {

			border-color: white; 
			border-radius: 25px; 
			border-style: solid;
			border-width: 1px;
			width: 300px; 
			height: 50px;
			text-align: center;

		}

JavaScript

var scene, camera, renderer, mesh;

		var controls;

		var keyboard = {};
		var player = { height: 1.8, speed: 0.1, turnSpeed: Math.PI * 0.002 };

		function init() {

			scene = new THREE.Scene();
			camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );		
			


			// Polygons



			var geometry = new THREE.BoxGeometry( 5, 5, 5 );
			var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
			var cube = new THREE.Mesh( geometry, material );
			cube.position.set( 0, 5, 0 );
			scene.add( cube );



			// Lighting


			var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
			directionalLight.position.set( -5, 5, -5 );
			scene.add( directionalLight );

			var light = new THREE.PointLight( 0xffffff, 1.2, 50, 2 );
			light.position.set( -0.5, 1, 0.5 );
			scene.add( light );

			var ambLight = new THREE.AmbientLight( 0xffffff, 0.483 ); // soft white light
			ambLight.position.set( 0, 1, 0 );
			scene.add( ambLight );

			var spotLight = new THREE.SpotLight( 0xffffff, 0.3 );
			spotLight.position.set( 5, 10, 5 );
			spotLight.castShadow = true;
			spotLight.shadow.mapSize.width = 500;
			spotLight.shadow.mapSize.height = 500;
			spotLight.shadow.camera.near = 0.25;
			spotLight.shadow.camera.far = 1000;
			spotLight.shadow.camera.fov = 3;
			scene.add( spotLight );




			// Helpers


			var size = 10;
			var divisions = 10;

			var gridHelper = new THREE.GridHelper( size, divisions );
			scene.add( gridHelper );







			// Render 

			renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.getElementById("theDiv").appendChild(renderer.domElement);
			renderer.domElement.id = 'myCanvas';


			renderer.shadowMap.enabled = true;
			renderer.shadowMap.type = THREE.BasicShadowMap;

			// Resize to the size of the screen
			window.addEventListener('resize', function() {

				var width =...