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>
<div id="container"></div>
JavaScript
var camera, controls, scene, renderer;
init();
render();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 16000 );
camera.position.z = 500;
camera.position.y = 200;
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
var geometry;
var material;
var mesh;
//Fake skybox
geometry = new THREE.SphereGeometry( 8196, 32, 32 );
material = new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.DoubleSide });
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//Fake floor
geometry = new THREE.PlaneGeometry( 4096, 4096, 16, 16 );
material = new THREE.MeshPhongMaterial( { color: 0x00ffff });
material.depthWrite = false;
mesh = new THREE.Mesh( geometry, material );
mesh.rotation.set(-Math.PI/2, 0, 0);
scene.add( mesh );
//Thingies on top
geometry = new THREE.TorusKnotGeometry( 42, 15, 100, 16 );
material = new THREE.MeshLambertMaterial( { color: 0x00ff00, transparent: true, opacity: 1});
material.depthWrite = false;
var depth = 1;
mesh = new THREE.Mesh( geometry, material ); mesh.renderDepth = depth; mesh.position.set(80, 0, 80); scene.add( mesh );
mesh = new THREE.Mesh( geometry, material ); mesh.renderDepth = depth; mesh.position.set(0, 160, 40); scene.add( mesh );
mesh = new THREE.Mesh( geometry, material ); mesh.renderDepth = depth; mesh.position.set(0, 0, 0); scene.add( mesh );
mesh = new THREE.Mesh( geometry, material ); mesh.renderDepth = depth; mesh.position.set(200, 200, 200); scene.add( mesh );
mesh = new THREE.Mesh( geometry, material ); mesh.renderDepth = depth; mesh.position.set(-50, 150, 250); scene.add( mesh );
//Normal boxes
geometry = new THREE.BoxGeometry( 128, 128, 128 );
material = new...