JSFiddle - React, Tailwind, and code Playground

by suhail

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">


</script>

JavaScript

/*
Technique to merge many meshes into one and retain individual color.
*/

var camera, scene, renderer, geometry, material, parentMesh;

init();
animate();

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 300;
  scene.add(camera);

  var ambientLight = new THREE.AmbientLight(0x555555)
  scene.add(ambientLight)
  var light = new THREE.DirectionalLight(0xffffff, 3)
  light.position.set(-200, 80, -100)
  scene.add(light)

  var parentGeometry = new THREE.Geometry();
  var parentMatrial = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    shading: THREE.SmoothShading,
    vertexColors: THREE.VertexColors
  });

  parentMesh = new THREE.Mesh(parentGeometry, parentMatrial);

  for (var i = 0; i < 1000; i++) {

    color = Math.floor(Math.random() * 16777215).toString(16);
    x = (Math.random() * 500) - 250;
    y = (Math.random() * 500) - 250;
    z = (Math.random() * 500) - 250;
    rotation = Math.random() * 2
    size = (Math.random() * 10) + .2;
    cube = makeCube(size, color);
    cube.position.set(x, y, z);
    cube.rotation.set(rotation, rotation, rotation);
    cube.updateMatrix()
    parentGeometry.merge(cube.geometry, cube.matrix);
  }

  scene.add(parentMesh);
  renderer = new THREE.WebGLRenderer();

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.rotateSpeed = 0.5;
  controls.zoomSpeed = 1;
  controls.minDistance = 100;
  controls.maxDistance = 6000;
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function makeCube(size, color) {
  var geom = new THREE.BoxGeometry(size, size, size);

  for (var i = 0; i < geom.faces.length; i++) {
    face = geom.faces[i];
    face.color.setHex('0x' + color);
  }
  var cube = new THREE.Mesh(geom);
  return cube;
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
 ...