JSFiddle - React, Tailwind, and code Playground

by thmsdnnr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/examples/js/loaders/OBJLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/examples/js/controls/OrbitControls.js"></script>

<script src="https://objpatroljs-zzcpndkpct.now.sh/patrol.js"></script>

JavaScript

var container;
			console.log('test');
			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 player = new THREE.Object3D();
			var level;

			var windowHidden=false;
			var hideTime=null;

			init();
			animate();

			var  target;

			var playerNavMeshGroup;

			var calculatedPath = null;

			var pathLines;

			function init() {

				
      function handleVisibilityChange() {
            if (document.hidden) {
              windowHidden=true;
              hideTime=window.performance.now();
            } else  {
              windowHidden=false;
              var timeDiff=(window.performance.now()-hideTime)/1000;
              console.log('Page invisible for ',timeDiff,' seconds, jump ahead.');
              tick(timeDiff);
              render();
            }
          }
      document.addEventListener("visibilitychange", handleVisibilityChange, false);

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				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 objLoader = new THREE.OBJLoader();

				objLoader.load( 'https://objpatroljs-zzcpndkpct.now.sh/level.obj', function( object ) {
				//	object.position.y = 1000;
				    object.traverse(function (node) {
						if (node.type === 'Mesh') level = node;
					});
				   ...