Instanced Meshes 100x100

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

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

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

let g = new THREE.CylinderBufferGeometry(0.4, 0.4, 1, 16);
g.rotateX(Math.PI * 0.5);
let m = new THREE.MeshBasicMaterial({vertexColors: true});
let im = new THREE.InstancedMesh(g, m, 10000);
im.instanceMatrix.setUsage( THREE.DynamicDrawUsage );
let d = new THREE.Object3D();
let c = 0;
let clr = [];
let phase = [];
let speed = [];
let instMat4 = new THREE.Matrix4();
for (let y = 0; y < 100; y++){
	for (let x = 0; x < 100; x++){
  	d.position.set(x - 49.5, y - 49.5, 0);
    phase.push(Math.PI * 2 * Math.random());
    speed.push(Math.random() * 1.5 + 0.5);
    d.updateMatrix();
    im.setMatrixAt(c, d.matrix);
    c++;
    
    clr.push(1, 0, 0);
  }
}
g.setAttribute("color", new THREE.InstancedBufferAttribute(new Float32Array(clr), 3));
im.userData = {
	phase: phase,
  speed: speed
}
scene.add(im);

let oldIndex = 0;
let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
let intersects;
let col = new THREE.Color();

document.addEventListener("click", event => {

	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  
  intersects = raycaster.intersectObject(im);
  if(intersects.length > 0){
  	
    let idx = intersects[0].instanceId;
    
    setInstanceColor(oldIndex, 0xff0000);
    setInstanceColor(idx, 0xffff00);
    g.attributes.color.needsUpdate = true;
    
    oldIndex = idx;
    
  }
})

var clock = new...