JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
	 <script src="https://threejs.org/build/three.min.js"></script>
    <script src="https://threejs.org/examples/js/modifiers/SimplifyModifier.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
   <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
		<script src = "https://rawcdn.githack.com/chandlerprall/ThreeCSG/master/ThreeCSG.js"></script>
		<script src="https://cdn.rawgit.com/nickjanssen/PatrolJS/master/patrol.js"></script>
 <script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>

CSS

body {
			font-family: Arial;
			background-color: #000;
			color: #fff;
			margin: 0px;
			overflow: hidden;
		}

		.info h1 {
			padding: 0;
			margin: 0;
		}

JavaScript

var container;
			var camera, scene, renderer, controls;
			var raycaster, intersectedObject;
			var mouse = new THREE.Vector2();
			var startTime	= Date.now();
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			var lastFrameTime = 0;
			var maxFrameTime = 0.03;
			var elapsedTime = 0;
    var m = []
    var stats;
			var level;
  var plane;
  var result;
			init();
			animate();
			var player, target;
			var playerNavMeshGroup;
			var calculatedPath = null;
			var pathLines;
var mesh;

			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000000 );
				camera.position.x = -10;
				camera.position.y = 14;
				camera.position.z = 10;
				scene = new THREE.Scene();
       
				var ambient = new THREE.AmbientLight( 0x101030 );
				scene.add( ambient );
				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
				directionalLight.position.set( 0, 0.5, 0.5 );
				scene.add( directionalLight );
  			//	var jsonLoader = new THREE.JSONLoader();
					renderer = new THREE.WebGLRenderer({
        antialias: false
    });
			//	renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setClearColor(0xffffff);
        renderer.gammaFactor = 2.2;
		    renderer.gammaOutput = true;
				container.appendChild( renderer.domElement );
        
          // STATS
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	document.body.appendChild( stats.domElement );
        
      var loader = new THREE.GLTFLoader();
/*loader.load( 'https://cdn.glitch.com/21f3e5e6-62c1-4b80-9336-cc3328368bd8%2Fmodel.glb?1553699639302', (data) => {
console.log(data)
//  scene.add(object)
  data.scene.traverse((node) => {
        if(node.isMesh)...