JSFiddle - React, Tailwind, and code Playground

HTML

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
    }
  }
</script>

CSS

body {
  margin: 0;
}

JavaScript

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

/// create large number of instances
{
  let geometry = new THREE.PlaneGeometry(1, 1); // create a quad
  let material = new THREE.MeshBasicMaterial({ color: 0xffffff });

  var instances = 2541226; // number of instances
  var instancedMesh = new THREE.InstancedMesh(geometry, material, instances);

  var position = new THREE.Vector3();
  var color = new THREE.Color();
  for (var i = 0; i < instances; i++) {
      // random position
      position.x = THREE.MathUtils.randFloat(-50, 50);
      position.y = THREE.MathUtils.randFloat(-50, 50);
      position.z = THREE.MathUtils.randFloat(-50, 50);
      instancedMesh.setMatrixAt(i, new THREE.Matrix4().makeTranslation(position.x, position.y, position.z));

      // random color
      color.setRGB(Math.random(), Math.random(), Math.random());
      instancedMesh.setColorAt(i, color);
  }
  scene.add(instancedMesh);
}

camera.position.z = 200;

// fps
var frameCount = 0;
var renderTime = 0;
var fpsContainer = document.createElement('div');
fpsContainer.style.position = 'fixed';
fpsContainer.style.top = '10px';
fpsContainer.style.left = '10px';
fpsContainer.style.color = 'white';
document.body.appendChild(fpsContainer);
var lastUpdateTime = performance.now();

function animate() {

	requestAnimationFrame( animate );
  
  // fps
  var now = performance.now();
  var deltaTime = now - lastUpdateTime;
  frameCount++;
  if (deltaTime >= 1000) {
    var fps = Math.round(frameCount / (deltaTime / 1000));
    fpsContainer.innerText = 'FPS: ' + fps;
    frameCount = 0;
    lastUpdateTime =...