JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<script src="https://threejs.org/build/three.js"></script>

CSS

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set (0,1.2,1.5);
//camera.lookAt (new THREE.Vector3(0,0,0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


var geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
var vertices = new Float32Array([
  -1.0, -1.0, 1.0,
  1.0, -1.0, 1.0,
  1.0, 1.0, 1.0,

  1.0, 1.0, 1.0,
  -1.0, 1.0, 1.0,
  -1.0, -1.0, 1.0
]);

// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
var material4 = new THREE.MeshBasicMaterial({
  color: 0x990000
});
var material = new THREE.MeshBasicMaterial({
  color: 0x444444
});
var material2 = new THREE.MeshBasicMaterial({
  color: 0x222222
});
var material3 = new THREE.MeshBasicMaterial({
  color: 0x333333
});



var mesh = new THREE.Mesh(geometry, material);
var mesh2 = new THREE.Mesh(geometry.clone(), material2);
var mesh3 = new THREE.Mesh(geometry.clone(), material3);

var mesh4 = new THREE.Mesh(geometry.clone(), material4);

mesh2.position.x = -2;
mesh3.position.x = 2;

mesh4.position.y = 1;
mesh4.position.z = -1;

scene.add(mesh);
scene.add(mesh2);
scene.add(mesh3);
scene.add(mesh4);
var meshes = [mesh, mesh2, mesh3];

var speed = 0, velocity = 2;

document.addEventListener("keydown", onDocumentKeyDown, false);
document.addEventListener("keyup", onDocumentKeyUp, false);

function onDocumentKeyDown(event) {
  var keyCode = event.which;
  if (keyCode == 65) {
    speed = (velocity / 100);
  } else if (keyCode == 68) {
    speed = -(velocity / 100);
  }
};

function onDocumentKeyUp(event) {
  speed = 0;
};


function animate() {
  meshes.forEach((m) => {
    if (m.position.x <= 4 - speed...