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";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.setScalar(10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

var boxEdges = new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(5, 1, 5));
var instGeom = new THREE.InstancedBufferGeometry().copy(boxEdges);
var instOffset = [];
for (let i = -1; i <= 1; i++){
	for (let j = -1; j <= 1; j++){
  	instOffset.push(j * 6, 0, i * 6);
  }
}
instGeom.setAttribute("offset", new THREE.InstancedBufferAttribute(new Float32Array(instOffset), 3));
instGeom.instanceCount = Infinity;
//console.log(instGeom);

var instMat = new THREE.LineBasicMaterial({
	color: 0xffff00, 
  onBeforeCompile: shader => {
  	//console.log(shader.vertexShader);
    shader.vertexShader = `
    	attribute vec3 offset;
      ${shader.vertexShader}
    `.replace(
    	`#include <begin_vertex>`,
      `
      #include <begin_vertex>
      transformed += offset;
      `
    );
    //console.log(shader.vertexShader);
  }
});

var instLines = new THREE.LineSegments(instGeom, instMat);
scene.add(instLines);


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