body { margin: 0; overflow: hidden; background-color: #2C3143; }
// Create the scene
var scene = new THREE.Scene();

// Create the camera
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width / height;
var camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000);
camera.position.set(0,0,20);

// Create the renderer
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

// Create a shape
var colors = ['#D94A64', '#5E6A8C', '#CDD876', '#7A946E', '#2C3143'];
var numBoxes = 200;
var boxes = [];

var container = new THREE.Object3D();

var boxGeom = new THREE.BoxBufferGeometry(5,5,5);
for (var i = 0; i < numBoxes; i++) {
  
  var colorIndex = Math.ceil(Math.random() * colors.length - 1);
  var material = new THREE.MeshLambertMaterial({ color: colors[colorIndex] });
  
  var box = new THREE.Mesh(boxGeom, material);
  box.rotation.x = Math.random() * Math.PI;
  box.rotation.y = Math.random() * Math.PI;
  box.rotation.z = Math.random() * Math.PI;
  box.speedX = Math.random() * 0.02 - 0.01;
  box.speedY = Math.random() * 0.02 - 0.01;
  box.speedZ = Math.random() * 0.02 - 0.01;
  box.castShadow = true;
  box.receiveShadow = true;
  
  boxes.push(box);
  container.add(box);
}

scene.add(container);

// Light
var light = new THREE.DirectionalLight(0xffffff, 0.9);
light.position.set(-1,3,1);
scene.add(light);


function animate() {
  requestAnimationFrame(animate);
  
  for (var i = 0; i < numBoxes; i++) {
    boxes[i].rotation.x += boxes[i].speedX;
    boxes[i].rotation.y += boxes[i].speedY;
    boxes[i].rotation.z += boxes[i].speedZ;
  }
  
  container.rotation.y += .02;
  
  renderer.render(scene, camera);
}
animate();

function onWindowResize() {
  var newWidth = window.innerWidth,
      newHeight = window.innerHeight,
      newAspect = newWidth / newHeight;
  camera.aspect = newAspect;
  camera.updateProjectionMatrix();
  renderer.setSize(newWidth, newHeight);
}

window.addEventListener('resize', onWindowResize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js