JSFiddle - React, Tailwind, and code Playground

by tolland

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/tolland/THREE.Terrain/43011e7355028ee7fabe070d869b92e7ee48651d/build/THREE.Terrain.js"></script>


  <script>
    var vertShader =
      `
        varying vec2 vPos;
        void main() {
          vPos = position.xz;
          gl_Position = projectionMatrix *
                        modelViewMatrix *
                        vec4(position,1.0);
        }
      `;

    var fragShader =
      `
        uniform vec3 center;
        uniform vec3 start;
        uniform vec3 end;
        uniform vec2 size;
        uniform float lineHalfWidth;
        uniform bool enabled;
        
        varying vec2 vPos;
        
        void main() {
          vec2 Ro = size * .5;
          vec2 Uo = abs( vPos - center.xz ) - Ro;
          
          vec3 c = mix(vec3(1.), vec3(1.,0.,0.), float(enabled && (abs(max(Uo.x,Uo.y)) < lineHalfWidth)  ));
          
          gl_FragColor = vec4(c, float(enabled && (abs(max(Uo.x,Uo.y)) < lineHalfWidth)  ));
        }
        
      `;
      
      var uniforms = {
  center: {
    value: new THREE.Vector3()
  },
  start: {
    value: new THREE.Vector3()
  },
  end: {
    value: new THREE.Vector3()
  },
  size: {
    value: new THREE.Vector2(50, 50)
  },
  lineHalfWidth: {
    value: 1.0
  },
  enabled: {
    value: false
  }
}

//debugging purposes in jsfiddle
var selected_objects = [];
var highlighted_objects = [];


  </script>

CSS

body {
        overflow: hidden;
        margin: 0;
      }

JavaScript

/**
 * 
 * 
 * 
 */


  console.clear();
  setup();
  render();


var camera, scene, renderer, clock, player, terrainScene, decoScene, lastOptions, controls = {},
  fpsCamera, skyDome, skyLight, sand, water, stats, litCube, gui; // jscs:ignore requireLineBreakAfterVariableAssignment


//globals which are used by the utils lib
var active_camera;
var controlled_object;

var w_max = 500;
var h_max = 500;
var w_min = -500;
var h_min = -500;


function setup() {

  //
  setupThreeJS();
  setupMainCamera();
  setupControls();
  setupSkyDome();
  setupWorld();

}



function setupThreeJS() {

  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2(0x868293, 0.0007);
  // set the name to make it easier to find in console.log
  scene.name = 'Scene';

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: false
  })

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  renderer.domElement.setAttribute('tabindex', -1);

  clock = new THREE.Clock(false);


    // Add stats to page.
    stats = new Stats();
    document.body.appendChild( stats.dom );

}

function setupMainCamera() {
  camera = new THREE.PerspectiveCamera(55, renderer.domElement.width / renderer.domElement.height, 1, 10000);
  scene.add(camera);
  camera.position.x = 600;
  camera.position.y = 361;
  camera.position.z = 606;
  camera.rotation.x = -62 * Math.PI / 180;
  camera.rotation.y = 35 * Math.PI / 180;
  camera.rotation.z = 42 * Math.PI / 180;

  //give the camera a name so it can be found in console.log
  camera.name = 'Main Cam';

  // make this the active camera
  active_camera = camera;
}

function setupControls() {

  //create a camera to track the active object
  fpsCamera = new THREE.PerspectiveCamera(60, renderer.domElement.width / renderer.domElement.height, 1, 10000);

  fpsCamera.name = 'FPS Cam';

  // create using Orbit example  
  controls = new THREE.OrbitControls(camera, renderer.domElement);
 ...