JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<script src='http://threejs.org/build/three.min.js'></script>
<script src='http://learningthreejs.com/data/THREEx/THREEx.KeyboardState.js'></script>

<script src="http://stemkoski.github.io/Three.js/js/Detector.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/Stats.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/OrbitControls.js"></script>

<div id="canvasView"></div>

JavaScript

var canvasWidth = 578, canvasHeight = 200;
var camera = new THREE.PerspectiveCamera(90, canvasWidth  / canvasHeight, 0.1, 1000);
    camera.position.z = 3;

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(canvasWidth , canvasHeight);
 
var viewport= document.getElementById( 'canvasView' );
viewport.appendChild( renderer.domElement );

//THREE.TorusGeometry(radius, tube, segmentsR, segmentsT)
var torus = new THREE.TorusGeometry( 1.5, 0.35, 16, 32 );
// THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight)
var sphere = new THREE.SphereGeometry( 0.3, 16, 16 );

var material = new THREE.MeshPhongMaterial({
        // light
        specular: '#ffffff',
        // intermediate
        color: '#ffffff',
        // dark
        emissive: '#000000',
        shininess: 100
      });
 
 
 var torusMesh = new THREE.Mesh(torus, material);
 var sphereMesh = new THREE.Mesh(sphere, material);

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1);
directionalLight.position.set( 0, 10, 10 ); 



var scene = new THREE.Scene();
 scene.add(torusMesh);
 scene.add(sphereMesh);
 scene.add( directionalLight );

var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
var render = function () {
    
    
    var delta = clock.getDelta(); // seconds.
	var moveDistance = 20 * delta; // 200 pixels per second
	var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second
    
    
    if ( keyboard.pressed("W") )
		sphereMesh.translateZ( -moveDistance );
	if ( keyboard.pressed("S") )
		sphereMesh.translateZ(  moveDistance );
	if ( keyboard.pressed("Q") )
		sphereMesh.translateX( -moveDistance );
	if ( keyboard.pressed("E") )
		sphereMesh.translateX(  moveDistance );	
    
    
    
    requestAnimationFrame(render);
    torusMesh.rotation.x += 0.01;
    torusMesh.rotation.y += 0.015;
    renderer.render(scene, camera);
};

render();