JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.js"></script>
JavaScript
var scena = new THREE.Scene();
// Set camera
var camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,innerHeight);
document.body.appendChild(renderer.domElement);
// Create sun and set geometry
var sun_geometry = new THREE.SphereGeometry(1,32,32);
var sun_material = new THREE.MeshLambertMaterial( {color: 0xff0000} );
var sun = new THREE.Mesh(sun_geometry,sun_material);
sun.matrixAutoUpdate = false;
scena.add(sun);
// Create earth and set geometry
var earth_geometry = new THREE.SphereGeometry(0.5,32,32);
var earth_material = new THREE.MeshLambertMaterial( {color: 0x0000ff} );
var earth = new THREE.Mesh(earth_geometry,earth_material);
earth.matrixAutoUpdate = false;
scena.add(earth);
// Create moon and set geometry
var moon_geometry = new THREE.SphereGeometry(0.25,32,32);
var moon_material = new THREE.MeshLambertMaterial( {color: 0x00ffff} );
var moon = new THREE.Mesh(moon_geometry,moon_material);
moon.matrixAutoUpdate = false;
earth.add(moon);
// set Lights
var system_light = new THREE.DirectionalLight( 0xffffff, 0.4);
system_light.position.set(0.5,0,1).normalize();
var sun_light = new THREE.PointLight( 0xffffff, 1, 100);
sun_light.position.set(1,1,0).normalize();
// Add light
scena.add(system_light);
sun.add(sun_light);
// Rendering
var render = function()
{
// Calculating delta time
var now = new Date();
var dt = now-(render.time || now);
render.time = now;
renderer.render(scena,camera);
var...