JSFiddle - React, Tailwind, and code Playground

by Browork

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, 1000);
camera.position.setScalar(10);
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor("#f0ebee", 1);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

var boxEdges = new THREE.EdgesGeometry(new THREE.CylinderBufferGeometry(1, 1, 1,16));
var instGeom = new THREE.InstancedBufferGeometry().copy(boxEdges);
var instOffset = [];
for (let i = -50; i <= 50; i++){
	for (let j = -50; j <= 50; 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 geometry = new THREE.CylinderBufferGeometry( 1, 1, 1,16,1 );
      var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
      polygonOffset:true,
      color:0xff0000,
      polygonOffsetFactor: 0.75,
   		polygonOffsetUnits: 1
      }));
      
      scene.add(mesh);
      
   
      
      
      
      let axes = new THREE.AxesHelper(100,100,100);
      
      scene.add(axes)

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

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


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
 // console.log(renderer.info.render);
});