JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0 ;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(1);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var sphereGeom = new THREE.SphereBufferGeometry(0.5, 8, 8);

var instGeom = new THREE.InstancedBufferGeometry();
instGeom.copy(sphereGeom);
var instRow = [];
for (let i = 1; i < 10; i++){
	instRow.push(-4.5 + i, 0, 0)
}
instGeom.setAttribute("instRow", new THREE.InstancedBufferAttribute(new Float32Array(instRow), 3));

var instGeom2 = new THREE.InstancedBufferGeometry();
instGeom2.copy(instGeom);
var instCol = [];
for (let i = 0; i < 10; i++){
	instCol.push(0, -4.5 + i, 0);
}
instGeom2.setAttribute("instCol", new THREE.InstancedBufferAttribute(new Float32Array(instCol), 3));

var sphereMat = new THREE.MeshLambertMaterial({color: 0x88aaff});
sphereMat.onBeforeCompile = shader => {
	console.log(shader.vertexShader);
  shader.vertexShader = `
  	attribute vec3 instRow;
    attribute vec3 instCol;
  ` + shader.vertexShader;
  shader.vertexShader = shader.vertexShader.replace(
  	`#include <begin_vertex>`,
    `#include <begin_vertex>
    	transformed += instRow;
      transformed += instCol;
    `
  )
}
var sphere = new THREE.Mesh(instGeom2, sphereMat);
scene.add(sphere);

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