JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<body>
  <div id="world">
  </div>
</body>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

// color palette for the project
var Colors = {
  rose: 0xFEA1DE,
  lavender: 0xEBD3F8,
  green: 0xBDFFB4,
  blue: 0xC0F4F4,
  teal: 0x205F6E,
  purple: 0x6C0470
};

// variables
var scene,
  camera,
  fieldOfView,
  aspectRatio,
  nearPlane,
  farPlane,
  HEIGHT,
  WIDTH,
  renderer,
  container,
  controls,
  sphere;

//-------------SET THE SCENE---------------------------------------------------------------------------------

function createScene() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

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

  //-------------CAMERA---------------------------------------------------------------------------------	
  // Create the camera

  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = 1;
  farPlane = 10000;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
  );

  // Set the position of the camera
  camera.position.x = 0;
  camera.position.z = 200;
  camera.position.y = 100;

  //-------------RENDERER---------------------------------------------------------------------------------
  // Create the renderer

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

  renderer.setSize(WIDTH, HEIGHT);

  // Enable shadow rendering
  renderer.shadowMap.enabled = true;

  // Add the DOM element of the renderer
  container = document.getElementById('world');
  container.appendChild(renderer.domElement);

  // ---------RESPONSIVENESS--------------------------------------------------------------------------------------   
  function handleWindowResize() {
    // update height and width of the renderer and the camera
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  }

  window.addEventListener('resize', handleWindowResize, false);
}

//...