JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.io/three.js/examples/js/controls/TrackballControls.js"></script>
<script src="http://mrdoob.github.io/three.js/examples/js/Detector.js"></script>
<body>
  <div id="container"></div>
  <div id="info">
	<a href="http://threejs.org" target="_blank">three.js</a>
    - trackball controls example</br>
    MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
  </div>
</body>

CSS

body {
  color: #000;
  font-family:Monospace;
  font-size:13px;
  text-align:center;
  font-weight: bold;
  background-color: #fff;
  margin: 0px;
  overflow: hidden;
}

#info {
  color:#000;
  position: absolute;
  top: 0px; width: 100%;
  padding: 5px;
}

a {
  color: red;
}

JavaScript

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.z = 500;

  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 );

  // world
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

  //var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
  var radius = 200;
  var tubeRadius = 50;
  var radialSegments = 8 * 10;
  var tubularSegments = 6 * 150;
  var arc = 7;
  var geometry = new THREE.TorusGeometry( radius, tubeRadius, radialSegments, tubularSegments, arc );
  var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );
    
  for ( var i = 0; i < 1; i ++ ) {
    var mesh = new THREE.Mesh( geometry, material );
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    scene.add( mesh );
  }


  // lights
  light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 1, 1, 1 );
  scene.add( light );
    
  light = new THREE.DirectionalLight( 0x002288 );
  light.position.set( -1, -1, -1 );
  scene.add( light );

  light = new THREE.AmbientLight( 0x222222 );
  scene.add( light );

  // renderer
  renderer = new THREE.WebGLRenderer( { antialias: false } );
  renderer.setClearColor( scene.fog.color, 1 );
  renderer.setSize( window.innerWidth, window.innerHeight );

  container = document.getElementById( 'container' );
  container.appendChild( renderer.domElement );
  //

  window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
 ...