JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="stage"></div>

CSS

body{
}

canvas{
  background: #111;
  width: 600px;
  height: 600px;
}

JavaScript

var RENDERER,
		SCENE,
    CAMERA,
    SPHERE,
    PLANE,
    LIGHTS;

var render,
		threeObj,
		rotateSphere;

threeObj = function(data){
	obj = {
  	obj: null,
  	geometry: null,
    material: null
  }
	if(data){
  	for(prop in obj){
    	if(data[prop]){
      	obj[prop] = data[prop];
      }
    }
  }
	return obj;
}

RENDERER = new THREE.WebGLRenderer();
RENDERER.setSize(600,600);
document.getElementById('stage').appendChild(RENDERER.domElement);

SCENE = new THREE.Scene();

CAMERA = new THREE.PerspectiveCamera(45, 600/600 , 0.1, 1000);
CAMERA.position.z = 400;

SPHERE = new threeObj({
	geometry: new THREE.SphereGeometry(70, 6, 200),
	material: new THREE.MeshPhongMaterial({
    color: 0xe4e4e4,
    specular: 0x999999,
    emissive: 0x111155,
    shading: THREE.FlatShading
  })
});
SPHERE.obj = new THREE.Mesh(SPHERE.geometry, SPHERE.material);
SPHERE.obj.position.set(0, 0, 0);
SCENE.add(SPHERE.obj);

PLANE = new threeObj({
	geometry: new THREE.PlaneGeometry(1000, 1000),
	material: new THREE.MeshPhongMaterial({
    color: 0x111111,
    specular: 0x999999,
    emissive: 0x111133,
    //shading: THREE.FlatShading
  })
});
PLANE.obj = new THREE.Mesh(PLANE.geometry, PLANE.material);
SCENE.add(PLANE.obj);

LIGHTS = [];

LIGHTS[0] = new THREE.PointLight(0xccccee);
LIGHTS[0].position.set(-60, 30, 120);

LIGHTS[1] = new THREE.PointLight(0xee5555);
LIGHTS[1].position.set(60, -30, 120);

LIGHTS[2] = new THREE.AmbientLight(0x222233);

LIGHTS.forEach(function(light){
	SCENE.add(light);
});

//

rotateSphere = function(){
  //SPHERE.position.x += 1; // Move along x-axis towards the right side of the screen
  //SPHERE.position.y -= 1; // Move along y-axis towards the bottom of the screen

  SPHERE.obj.rotation.x += .01; // Spin left to right on the x-axis
	SPHERE.obj.rotation.y -= .01; // Spin top to bottom on the y-axis
}

render = function () {
  requestAnimationFrame(render);
  rotateSphere();
  RENDERER.render(SCENE,...