JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>jakfkjh</title>
    <script src='https://threejs.org/build/three.js'></script>
    <script src='https://threejs.org/examples/js/controls/OrbitControls.js'></script>
    <style>
      body: {
        margin: 0px;
      }

    </style>
  </head>

  <body>
  </body>

</html>

JavaScript

let {
  innerHeight: h,
  innerWidth: w
} = window;

let renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

let camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
camera.position.set(4, 4.75, 4);

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

let scene = new THREE.Scene();

let geometry = new THREE.BoxGeometry();

let material1 = new THREE.MeshBasicMaterial();
let material2 = new THREE.MeshPhongMaterial();

let count = 1;

let iMesh1 = new THREE.InstancedMesh(geometry, material1, count);
let iMesh2 = new THREE.InstancedMesh(geometry, material2, count * 10);

scene.add(iMesh1, iMesh2);

let light = new THREE.DirectionalLight();
light.position.set(-1, 1.75, 1);
scene.add(light);

let matrix = new THREE.Matrix4();
let color = new THREE.Color();

let position = new THREE.Vector3();
let zeroQ = new THREE.Quaternion();
let zeroS = new THREE.Vector3(1, 1, 1);


for (var x = 0; x < iMesh1.count; x++) {
  position.random().addScalar(-0.5).multiplyScalar(10);
  matrix.compose(position, zeroQ, zeroS);
  iMesh1.setMatrixAt(x, matrix);
  color.set(Math.random() * 0xffffff);
  iMesh1.setColorAt(x, color);
}
for (var x = 0; x < iMesh2.count; x++) {
  position.random().addScalar(-0.5).multiplyScalar(10);
  matrix.compose(position, zeroQ, zeroS);
  iMesh2.setMatrixAt(x, matrix);
  color.set(Math.random() * 0xffffff);
  iMesh2.setColorAt(x, color);
}

function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();