JSFiddle - React, Tailwind, and code Playground

by navinleon

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;
}
img {
	width: 128px;
	height: 128px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}

JavaScript

// MatCap-style image rendered on a sphere
// modify sphere UVs instead of using a ShaderMaterial

var camera, scene, renderer;
var image;

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 = 'Drag mouse to rotate camera; scroll to zoom';
	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.position.set( 50, 50, 150 );

    scene.add( camera ); // since light is child of camera

	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.minDistance = 75;
	controls.maxDistance = 200;
    controls.noPan = true;

	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 material = new THREE.MeshBasicMaterial( { opacity: 0.1,color: 'green' } );
    var geometry = new THREE.SphereGeometry( 32, 32, 32 );
    var sphere = new THREE.Mesh( geometry, material );
		scene.add( sphere );
    
    var geometry = new THREE.TorusGeometry( 31.9, 0.16, 64, 100 );
    var material = new THREE.MeshBasicMaterial( { color: 'red' } );
    var torus = new THREE.Mesh( geometry, material );
    torus.rotation.x = Math.PI/2;
    scene.add( torus );    

}

function animate() {

	requestAnimationFrame( animate );

	controls.update();
    
	render();

}

function render() {

	renderer.render( scene, camera );

}