JSFiddle - React, Tailwind, and code Playground

by stdob

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}
img {
	width: 128px;
	height: 128px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}

JavaScript

var camera, scene, renderer;

var rotationY = new THREE.Matrix4();
var rotationX = new THREE.Matrix4();
var translation = new THREE.Matrix4();
var matrix = new THREE.Matrix4();

init();
animate();

function init() {

	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 = 'MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan';
	document.body.appendChild( info );

    renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	scene = new THREE.Scene();
	
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.useQuaternion = true;
    scene.add( camera ); // since light is child of camera

				controls = new THREE.TrackballControls( camera );

				controls.rotateSpeed = 1.0;
				controls.zoomSpeed = 1.2;
				controls.panSpeed = 0.8;

				controls.noZoom = false;
				controls.noPan = false;

				controls.staticMoving = true;
				controls.dynamicDampingFactor = 0.3;

				controls.keys = [ 65, 83, 68 ];

				controls.addEventListener( 'change', render );

	scene.add( new THREE.AmbientLight( 0x222222 ) );
	
	var light = new THREE.PointLight( 0xffffff, 1 );
	camera.add( light );
    
    var axisHelper = new THREE.AxisHelper( 50 );
    scene.add( axisHelper );
    
     var curve = new THREE.SplineCurve3( [
        new THREE.Vector3( -10, 0, 10 ),
        new THREE.Vector3( -5, 5, 5 ),
        new THREE.Vector3( 0, 0, 0 ),
        new THREE.Vector3( 5, -5, 5 ),
        new THREE.Vector3( 10, 0, 10 )
    ] );
    
    var geometry = new THREE.TubeGeometry(
        curve,  //path
        20,    //segments
        2,    ...