JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="main_canvas" style="border: solid 1px red;" width=300 height=300></canvas>

CSS

body {
  background: #000;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.126/build/three.module.js'

// renderer
const renderer = new THREE.WebGLRenderer({
  antialias: false,
  alpha: true,
  canvas: document.querySelector('#main_canvas'),
});
renderer.setPixelRatio(window.devicePixelRatio);

const [cw, ch] = [400, 400];
const camera = new THREE.OrthographicCamera(-cw / 2, cw / 2, ch / 2, -ch / 2, 0, 100);
camera.position.z = 50;

const count = 10;

const mesh = new THREE.InstancedMesh(
	new THREE.BoxGeometry(10, 10, 10, 1, 1, 1), 
  new THREE.MeshPhongMaterial({ color: 0xffaa00 }), 
  count);
	
const matrix = new THREE.Matrix4();

for ( let i = 0; i < count; i ++ ) {

	matrix.setPosition( 100 - ( i * 20 ), 0, 0 );
	mesh.setMatrixAt( i, matrix );

}

const scene = new THREE.Scene().add(mesh);

const lightD = new THREE.DirectionalLight(0xffffff, 1);
lightD.position.set(20, 30, 100);
scene.add(lightD);

renderer.render(scene, camera);