JSFiddle - React, Tailwind, and code Playground
CSS
body {
margin: 0;
overflow: hidden;
}
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() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.set(4, 2, -4);
camera.lookAt(0.5, 0.5, 0.5);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BufferGeometry();
const instCount = coords.length / 2;
const coordinates = new Float32Array(24 * instCount);
const indices = [];
for (let i = 0; i < instCount; i++) {
const startCoordinate = new THREE.Vector3(...coords[i * 2]);
const endCoordinate = new THREE.Vector3(...coords[i * 2 + 1]);
console.log(startCoordinate, endCoordinate)
// vertex 0
coordinates[i * 24 + 0] = 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] =...