JSFiddle - React, Tailwind, and code Playground

by Anton Bagayev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>

JavaScript

// revolutions per second
      var angularSpeed = 0.05; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        largeCube.rotation.x += angleChange;
        largeCube.rotation.y += angleChange;
        smallCube.rotation.x += angleChange;
        smallCube.rotation.y += angleChange;
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }
// renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0xeeeeee);
      document.body.appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
     // var aspect = window.innerWidth / window.innerHeight;
      //var d = 20;
      //camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );
      camera.position.z = 300;
 
      // scene
      var scene = new THREE.Scene();
      
      var r = "https://threejs.org/examples/textures/cube/Bridge2/";
			var urls = [ r + "posx.jpg", r + "negx.jpg",
							 r + "posy.jpg", r + "negy.jpg",
							 r + "posz.jpg", r + "negz.jpg" ];

			var loader = new THREE.CubeTextureLoader();
      loader.setCrossOrigin( 'anonymous' );
			textureCube = loader.load( urls );
			textureCube.format = THREE.RGBFormat;
			textureCube.mapping = THREE.CubeReflectionMapping;
 
      // cube
      var material = new THREE.MeshPhongMaterial({
        envMap: textureCube,
        specular: 0xFFFFFF,
        shininess: 30,
        shading: THREE.FlatShading,
      });
      var largeCube = new THREE.Mesh(new...