JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

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

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

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

let light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

const counter = 10000;

let g = new THREE.BoxGeometry();
let m = new THREE.MeshLambertMaterial();
let io = new THREE.InstancedMesh(g, m, counter);

let dummy = new THREE.Object3D();
for(let i = 0; i < counter; i++){
	dummy.position.random().subScalar(0.5).multiplyScalar(200);
  dummy.scale.setScalar(Math.random() * 1.9 + 0.1); // individual size for each instance
  dummy.updateMatrix();
  
  io.setMatrixAt(i, dummy.matrix);
  io.setColorAt(i, new THREE.Color(Math.random(), Math.random(), Math.random()));
}

scene.add(io);

renderer.setAnimationLoop( _ => {
  renderer.render(scene, camera);
});