JSFiddle - React, Tailwind, and code Playground

by Rob

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>

JavaScript

var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var pivot = new THREE.Object3D();
var sun = new THREE.Object3D();
var planet = new THREE.Mesh(
    new THREE.SphereGeometry( 5000, 384, 128 ),
    new THREE.MeshBasicMaterial({
        color: new THREE.Color( 0x00ffff ),
    }) );
var light = new THREE.PointLight( 0xffffff );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100000 );
var Y_AXIS = new THREE.Vector3( 0, 1, 0 );

scene.add( camera );
scene.add( pivot );
pivot.add( sun );
sun.add( planet );
scene.add( light );

pivot.position.set( 10000, 0, 0 );
sun.position.set( 50000000, 0, 0 );
planet.position.set( -50000000, 0, 0 );
camera.position.set( 9800, 0, 5000 );
camera.lookAt( sun.position );

animateScene();

function animateScene() {
    renderScene();
    requestAnimationFrame( animateScene );
    pivot.rotateOnAxis( Y_AXIS, Math.PI / 3000 );
//    console.log( "CAMERA", camera.position.toArray(), "PLANET", planet.position.toArray(), "SUN", sun.position.toArray(), "PIVOT", pivot.position.toArray() );
}

function renderScene() {
    renderer.render( scene, camera );
}