JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://s.cdpn.io/24025/ammo.small_1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/modifiers/SimplifyModifier.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>
<script src="https://ammo-concave.glitch.me/ammoMesh.js"></script>
<script src="https://ammo-concave.glitch.me/ammoUtils.js"></script>
    <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>

JavaScript

/*
 * decaffeinate suggestions:
 * DS102: Remove unnecessary code created because of implicit returns
 * DS208: Avoid top-level this.x
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
 */
 var stats;
var animate = function() {
  updateBoxes();
  stats.update();
  render();
 // console.log(camera.position)
  return requestAnimationFrame(animate);
};
  //stats.update()

var render = () => {

  const this_time = Date.now();
  if (((this_time - this.start_time) >= 1500) && (boxes.length <= this.box_limit)) {
   // addBox();
    this.start_time = Date.now();
}

  return this.renderer.render(this.scene, this.camera);
};

const initScene = () => {
    this.renderer = new THREE.WebGLRenderer({precision:'lowp'});
    this.renderer.setClearColor(0xccccff);
    /*
    @renderer.shadowCameraNear = 3
    @renderer.shadowCameraFar = @camera.far
    @renderer.shadowCameraFov = 50

    @renderer.shadowMapBias = 0.0039
    @renderer.shadowMapDarkness = 0.5
    @renderer.shadowMapWidth = 512
    @renderer.shadowMapHeight = 512
    */
    //@renderer = new THREE.CanvasRenderer()
    this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
    this.scene = new THREE.Scene();
    this.scene.add(this.camera);

    this.camera.position.set(-10.423292286346863,  26.87528082150762, -82.42617459689907)
    this.camera.lookAt(new THREE.Vector3(0, 0, 0));

    this.renderer.setSize(WIDTH, HEIGHT);
    const container = document.createElement( 'div' );
    document.body.appendChild( container );
    container.appendChild(this.renderer.domElement);
    
     //controls = new THREE.OrbitControls(camera, renderer.domElement);
    	// STATS
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	container.appendChild( stats.domElement );
      
    const pointLight = new THREE.SpotLight(0xFFFFFF);
    pointLight.position.x = 10;
   ...