JSFiddle - React, Tailwind, and code Playground

by MarkTheMule

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;

var earthPivot, moonPivot;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(
      70,
      window.innerWidth / window.innerHeight,
      0.1,
      100 );
    camera.position.y = 5;
    camera.position.z = 50;
    camera.lookAt(0, 0, 0)

    scene = new THREE.Scene();

		var geometry = new THREE.SphereGeometry( 6, 32, 32 );
    var material = new THREE.MeshNormalMaterial();
		
		// sun
		
    var sun = new THREE.Mesh( geometry, material.clone() );
    scene.add( sun );
		
		// earth
		
		earthPivot = new THREE.Group();
		sun.add( earthPivot );
		
		var earth = new THREE.Mesh( geometry, material );
		earth.scale.set( 0.025, 0.025, 0.025 );
		earth.position.set( -30, 0, 0 );
		earthPivot.add( earth );
		
		// moon
		
		moonPivot = new THREE.Group();
		earth.add( moonPivot );

		var moon = new THREE.Mesh( geometry, material );
		moon.scale.set( 0.25, 0.25, 0.25 );
		moon.position.set( - 10, 0, 0 );
		moonPivot.add( moon );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );
		
		earthPivot.rotation.y += 0.005;
		moonPivot.rotation.y += 0.05;

    renderer.render( scene, camera );

}