JSFiddle - React, Tailwind, and code Playground

by Augustus Yuan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>

JavaScript

(function() {
  var container;
  var camera, scene, renderer;

  var raycaster;
  var mouse;
  var objects = [];
  var rotationSpeed = [(Math.random() * 0.4)/100, (Math.random() * 0.4)/100, (Math.random() * 0.4)/100];
  var radius = 300;
  var theta = 0;
  var size = 50;
  var materials;
  var mesh;

  init();

  function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 300;
    camera.position.z = 500;

    scene = new THREE.Scene();
    
    var geometry = new THREE.BoxGeometry( 150, 150, 150 );

   	var loader = new THREE.TextureLoader();
    THREE.ImageUtils.crossOrigin = '';
    var texture = THREE.ImageUtils.loadTexture('https://i1.sndcdn.com/avatars-000205311834-hfoq1i-t500x500.jpg');
    initiateMesh(geometry, texture);
  }
  
  function initiateMesh(geometry, texture) {
  	var material = new THREE.MeshBasicMaterial( { map: texture } );
    
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    var egh = new THREE.EdgesHelper( mesh, 0xffffff );
    egh.material.linewidth = 1.5;
    scene.add( egh );

    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor("white");
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild(renderer.domElement);
    
    animate();
  }
  
  function animate() {
    requestAnimationFrame( animate );
    render();
  }

  function render() {
    // rotate camera
    theta += 0.05;

    camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
    camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
    camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
    camera.lookAt( scene.position );

    mesh.rotation.x += rotationSpeed[0];
    mesh.rotation.y += rotationSpeed[1];
    mesh.rotation.z +=...