JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>

CSS

body {
  margin: 0;
}

canvas {
  display: block;
}

JavaScript

var camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
  camera.position.set( 4, 0, 10 );

  scene = new THREE.Scene();
	
	var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
	hemiLight.position.set( 0, 10, 0 );
	scene.add( hemiLight );

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

  var geometry = new THREE.OctahedronBufferGeometry();
  var material = new THREE.MeshPhongMaterial();

  var meshes = new THREE.InstancedMesh(geometry, material, 5);
  scene.add(meshes);

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

  for (var i = 0; i < meshes.count; i++) {

    matrix.setPosition( i * 2, 0, 0);
    meshes.setMatrixAt(i, matrix);
    meshes.setColorAt(i, color.setHex(0xffffff * Math.random()));

  }

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}