JSFiddle - React, Tailwind, and code Playground

by twxyz

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

JavaScript

var camera, controls, scene, renderer, geometry, material, mesh;
var objects = [];

// does scale even matter?
var scale = 0.01;
var NEAR = 10 * scale;
// 30 AU 
var FAR = 4.5 * 1e9 * scale;
// radius of objects
var radius = 1000 * scale;

init();
animate();

function init() {

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, NEAR, FAR);
    camera.position.z = 500;
    scene.add(camera);
    
    controls = new THREE.OrbitControls( camera );
	controls.damping = 0.2;
	controls.addEventListener( 'change', render );

    for (var i = 0; i <= 10; i++) {
        geometry = new THREE.SphereGeometry(radius);
        material = new THREE.MeshBasicMaterial( { color: 0x111111 * i } );
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = FAR / 10 * i;
        scene.add(mesh);
        objects.push(mesh);
    }
    
    // 0 is the object closest to the origin, 10 is furthest from
    goToObject(1);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff);

    document.body.appendChild(renderer.domElement);

}

// move camera to the object
// and set the orbit around it
function goToObject(index) {
    var obj = objects[index];
    camera.position.copy(obj.position);
    camera.position.x += radius * 2;
    camera.position.y += radius * 2;
    controls.target = obj.position;
}

function animate() {

    requestAnimationFrame(animate);
    controls.update();
    render();
}

function render() {

    renderer.render(scene, camera);

}