JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r53/three.min.js"></script>
<div id="container"></div>

JavaScript

$(function()
{
  var WIDTH = 400;
  var HEIGHT = 300;
  
  var VIEW_ANGLE = 45;
  var ASPECT = WIDTH / HEIGHT;
  var NEAR = 0.1;
  var FAR = 10000;
  
  var container = $('#container');
  
  var renderer = new THREE.CanvasRenderer();
  
  var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
  
  var scene = new THREE.Scene();
  
  scene.add( camera );
  
  camera.position.z = 300;
  camera.position.y = 80;
  
  renderer.setSize(WIDTH, HEIGHT);
  
  container.append( renderer.domElement );

  var sphereMaterial = new THREE.MeshLambertMaterial(
  {
    color: 0xCC0000
  });
  
  var sphere = new THREE.Mesh( new THREE.CubeGeometry(80, 80, 80), sphereMaterial);
  
  scene.add( sphere );
      
  function animate() {

    window.requestAnimationFrame( animate );
    
    sphere.rotation.y += 0.1;
    
    renderer.render(scene, camera);  
  }
  
  animate();
});