JSFiddle - React, Tailwind, and code Playground

by nicolasrannou

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/ddt89ncslm4o7ie/Detector.js"></script>
<script src="https://dl.dropboxusercontent.com/s/mrhumrr2bxwt9nt/OBJLoader.js"></script>
<script src="https://dl.dropboxusercontent.com/s/n5sjyymajykna51/TGALoader.js"></script>
<script src="https://dl.dropboxusercontent.com/s/y4r5bmq2037jacg/OrbitControls.js"></script>

JavaScript

var container;

  var camera, controls, scene, renderer, model;

  var mouseX = 0,
    mouseY = 0;

  var test = true;

  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;

  init();
  animate();

  function webglAvailable() {
    try {
      var canvas = document.createElement('canvas');
      return !!(window.WebGLRenderingContext && (
        canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
    } catch (e) {
      return false;
    }
  }

  function init() {
    container = document.createElement('div');

    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 25;

    controls = new THREE.OrbitControls(camera);

    // scene
    scene = new THREE.Scene();

    // var ambient = new THREE.AmbientLight(0x404040); //0x101030
    // scene.add(ambient);

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

    let hemisphere = new THREE.HemisphereLight(0xffffff, 0x000000, 0.4);
    hemisphere.name = "Hemisphere";
    hemisphere.position.set(0, 100, 0);
    scene.add(hemisphere);

    var ambient = new THREE.AmbientLight(0xffffff, 0.3);
    scene.add(ambient);

    let spotLight = this.spotLight = new THREE.SpotLight(0xffffff, 0);
    spotLight.position.set(230, 30, 90);
    spotLight.angle = 0.5;//Math.PI / 2;
    spotLight.penumbra = 0.05;
    spotLight.decay = 2;
    spotLight.distance = camera.far;

    spotLight.castShadow = true;
    spotLight.shadow.mapSize.width = 1024;
    spotLight.shadow.mapSize.height = 1024;
    spotLight.shadow.camera.near = 10;
    spotLight.shadow.camera.far = camera.far;
    scene.add(spotLight);

    let directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.3);
    directionalLight1.position.set(1, 1, 1);
    directionalLight1.castShadow = true;
   ...