JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.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, 10000);
camera.position.set(5, 8, 13);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var boxHolder = new THREE.Group();
scene.add(boxHolder);

let cubeArray = [];
for (var k = -4.5; k < 5; k++) {
  for (var j = -4.5; j < 5; j++) {
    for (var i = -4.5; i < 5; i++) {
      let object = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.5, 0.5), new THREE.MeshNormalMaterial());
      object.position.x = i;
      object.position.y = j;
      object.position.z = k;
      cubeArray.push(object);
      boxHolder.add(object);
    }
  }
}

var textureLoader = new THREE.TextureLoader();
var boxWrapper = new THREE.Mesh(new THREE.BoxGeometry(1000, 1000, 1000),
[
	new THREE.MeshBasicMaterial({side: THREE.BackSide, map: textureLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg")}),
  new THREE.MeshBasicMaterial({color: "yellow", side: THREE.BackSide}),
  new THREE.MeshBasicMaterial({color: "green", side: THREE.BackSide}),
  new THREE.MeshBasicMaterial({color: "blue", side: THREE.BackSide}),
  new THREE.MeshBasicMaterial({color: "purple", side: THREE.BackSide}),
  new THREE.MeshBasicMaterial({color: "aqua", side: THREE.BackSide})
]
);
scene.add(boxWrapper);

render();

function render() {
  requestAnimationFrame(render);
  for (var u = 0; u < cubeArray.length; u++) {
  	cubeArray[u].rotation.x +=0.01;
  }
  boxHolder.rotation.x += 0.001;
  boxHolder.rotation.y += 0.002;
  boxHolder.rotation.z += 0.003;
  boxWrapper.rotation.x -= 0.001;
  boxWrapper.rotation.y -= 0.002;
  boxWrapper.rotation.z -= 0.003;
  renderer.render(scene, camera);
}