JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
var renderer, scene, camera, controls;
var AXIS = new THREE.Vector3( 0.25, 1, 0 ).normalize();
var clock = new THREE.Clock();
var delta = 0;
var t = 0;
init();
animate();
function init() {
// info
info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#fff';
info.style.fontWeight = 'bold';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1';
info.style.fontFamily = 'Monospace';
info.innerHTML = 'Drag mouse to rotate camera';
document.body.appendChild( info );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( 15, 15, 15 );
// controls
controls = new THREE.OrbitControls( camera );
// axes
scene.add( new THREE.AxisHelper( 20 ) );
// geometry
var geometry = new THREE.SphereGeometry( 2, 16, 8 );
// material
var material1 = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
var material2 = new THREE.MeshBasicMaterial( { color: 0x00aa00, wireframe: true } );
var material3 = new THREE.MeshBasicMaterial( { color: 0xc0c0c0, wireframe: true } );
var Planet = function ( geometry, material ) {
THREE.Mesh.call( this, geometry, material );
this.type = 'Planet';
this.rotationAxis = new THREE.Vector3( 0, 1, 0 ).normalize(); // always orbit on Y
this.rotationSpeed = Math.PI/2; // length of planet day
this.orbitAxis = new THREE.Vector3( 0, 0.1, 1 ).normalize(); // y,z for orbit AXIS
this.orbitSpeed = Math.PI / 8; // length of planet year
};
Planet.prototype = Object.create( THREE.Mesh.prototype );
...