body { margin: 0; overflow: hidden; background-color: #133046; }
//Colors
var colors = ['#15959F', '#F1E4B3', '#F4A090', '#F26144'];

// 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,50);

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

// Create a shape
var geometry = new THREE.DodecahedronBufferGeometry(1,0);
var shapeCount = 1000;

var centerGeometry = new THREE.DodecahedronBufferGeometry(7,0);
var colorIndex = Math.round(Math.random() * colors.length - 1);
var material = new THREE.MeshLambertMaterial({ color: colors[colorIndex] });
var centerShape = new THREE.Mesh(centerGeometry, material);
scene.add(centerShape);

for (var i = 0; i < shapeCount; i++) {
  colorIndex = Math.round(Math.random() * colors.length - 1);
  material = new THREE.MeshLambertMaterial({ color: colors[colorIndex] });
  var shape = new THREE.Mesh(geometry, material);
  var px = Math.random() * 100 - 50,
      py = Math.random() * 100 - 50,
      pz = Math.random() * 100 - 50;
  var rx = Math.random() * Math.PI * 2,
      ry = Math.random() * Math.PI * 2,
      rz = Math.random() * Math.PI * 2;
  var scale = Math.random() * .5;
  shape.position.set(px,py,pz);
  shape.rotation.set(rx,ry,rz);
  shape.scale.set(scale,scale,scale);
  
  scene.add(shape);
}

var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.y = 10;
scene.add(light);

var light2 = new THREE.DirectionalLight(0xffffff, .5);
light2.position.set(-10,-10,10);
scene.add(light2);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 50;
controls.maxDistance = 200;
controls.enableDamping = true;

var animSpeed = .001;
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  scene.rotation.y += animSpeed;
  centerShape.rotation.x += .02;
  centerShape.rotation.y -= .05;
  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
  2. https://threejs.org/examples/js/controls/OrbitControls.js