JSFiddle - React, Tailwind, and code Playground

by atulmourya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://cvstatic01.izmocars.com/web/content/lib/three/r87/js/controls/OrbitControls.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="container"></div>

CSS

#container{
  position:absolute;
  height:100%;
  width:100%
}

JavaScript

console.log(window);
    var scene = new THREE.Scene();
    scene.name = "Scene";
    
    window.scene = scene;

    var container = document.getElementById("container");
    var manager = new THREE.LoadingManager();
    // init a camera and define the parameters
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 100000);
    camera.position.set(248, 144, 484);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    // init WebGL Renderer and set up parameters
    var renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.domElement.style.zIndex = 1;
    //    renderer.shadowMap.enabled = true;
    // renderer.shadowMap.type = THREE.PCFShadowMap; // default THREE.PCFShadowMap
    container.appendChild(renderer.domElement);
    // init controls and controller parameters
    var controls = new THREE.OrbitControls(camera, container);
    controls.maxPolarAngle = Math.PI / 2;
    controls.enablePan = true;
    controls.maxDistance = 550;
    controls.minDistance = 300;
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.maxPolarAngle = 1.4533430342749532;
    controls.minPolarAngle = 0.8471975511965976;
    //AddLights();
    // Monitor loading progress in percentage
    manager.onProgress = function(item, loaded, total) {};
    // excute this when loading is completed
    manager.onLoad = function() {
        animate();
    };
    // Load complete 3D contents
    var file = 'https://dl.dropboxusercontent.com/s/cnhkmiigv0mh1zm/body1.json?dl=0';
    loadContents(file);
    
    AddLights();

    var reflectionCube = new THREE.CubeTextureLoader()
      .setCrossOrigin( 'anonymous' )
      .load( [
        'https://dl.dropboxusercontent.com/s/3vcrstl6ymtdhkk/l.jpg',
       ...