JSFiddle - React, Tailwind, and code Playground
JavaScript
import * as THREE from 'https://cdn.skypack.dev/three'
let camera, scene, renderer;
const coords = [[0, 0, 0], [1, 1, 1]]
init();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.BufferGeometry();
// vertices per cuboid * 3 / 2
const coordinates = new Float32Array(12 * coords.length);
// polygons per cuboid * 3 / 2
const indices = new Int16Array(18 * coords.length);
for (let i = 0; i < coords.length / 2; i++) {
const startCoordinate = new THREE.Vector3(...coords[i * 2]);
const endCoordinate = new THREE.Vector3(...coords[i * 2 + 1]);
// vertex 0
coordinates[i * 24] = startCoordinate.x;
coordinates[i * 24 + 1] = startCoordinate.y;
coordinates[i * 24 + 2] = startCoordinate.z;
// vextex 1
coordinates[i * 24 + 3] = endCoordinate.x;
coordinates[i * 24 + 4] = startCoordinate.y;
coordinates[i * 24 + 5] = startCoordinate.z;
// vextex 2
coordinates[i * 24 + 6] = startCoordinate.x;
coordinates[i * 24 + 7] = endCoordinate.y;
coordinates[i * 24 + 8] = startCoordinate.z;
// vextex 3
coordinates[i * 24 + 9] = endCoordinate.x;
coordinates[i * 24 + 10] = endCoordinate.y;
coordinates[i * 24 + 11] = startCoordinate.z;
// vextex 4
coordinates[i * 24 + 12] = startCoordinate.x;
coordinates[i * 24 + 13] = startCoordinate.y;
coordinates[i * 24 + 14] = endCoordinate.z;
// vextex 5
coordinates[i * 24 + 15] = endCoordinate.x;
coordinates[i * 24 + 16] = startCoordinate.y;
coordinates[i * 24 + 17] = endCoordinate.z;
// vextex 6
coordinates[i * 24 + 18] = startCoordinate.x;
coordinates[i * 24 + 19] = endCoordinate.y;
coordinates[i * 24 + 20] = endCoordinate.z;
// vextex 7
coordinates[i * 24 + 21] = endCoordinate.x;
coordinates[i * 24 + 22] = endCoordinate.y;
coordinates[i * 24 + 23] = endCoordinate.z;
// polygon 0
indices[i * 36] = i * 8;
indices[i * 36 + 1] = i * 8 + 1;
indices[i * 36 + 2]...