JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var box = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 10, 10, 10), new THREE.MeshBasicMaterial({
  color: "gray",
  wireframe: true
}));
box.geometry.translate(0, 50, 0);
scene.add(box);

var speedTrans = 20;
var speedRot = THREE.Math.degToRad(45);

var clock = new THREE.Clock();
clock.stop();
var delta = 0;

var camHolder = new THREE.Group();
camHolder.add(camera);
camHolder.position.set(0, 10, 20);
scene.add(camHolder);

document.addEventListener('keydown', function(evt) {
	if (!clock.running)clock.start();
  delta = clock.getDelta();
  if (evt.keyCode === 87) {
    camHolder.translateZ(-speedTrans * delta);
  } // w fast vorward
  if (evt.keyCode === 83) {
    camHolder.translateZ( speedTrans * delta);
  } // s backward a little slower
  if (evt.keyCode === 65) {
    camHolder.translateX(-speedTrans * delta);
  } // a slowly leftwards
  if (evt.keyCode === 68) {
    camHolder.translateX( speedTrans * delta);
  } // d slowly rightwards

  if (evt.keyCode === 76) {
    camHolder.rotateY(speedRot * delta);
  } // l turn to the left
  if (evt.keyCode === 82) {
    camHolder.rotateY(-speedRot * delta);
  } // r turn to the right

  if (evt.keyCode === 84) {
    camHolder.translateY(speedTrans * delta);
  } // t upstretch
  if (evt.keyCode === 66) {
    camHolder.translateY(-speedTrans * delta);
  } // b bend down
  if (evt.keyCode === 38) {
    camera.rotation.x += speedRot * delta;
  } // up arrow, looking higher
  if (evt.keyCode === 40) {
    camera.rotation.x += -speedRot * delta;
  } // down arrow, looking deeper

});

document.addEventListener('keyup', function(){ clock.stop(); });

render();

function render() {
  requestAnimationFrame(render);
 ...