JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<button id="btnMove">ClickMe</button>

CSS

body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}

#btnMove{
  position: absolute;
  margin: 10px;
}

JavaScript

console.clear();

import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {
  OrbitControls
} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls.js";
import gsap from "https://cdn.skypack.dev/gsap@3.9.1";

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

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

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

const INST_COUNT = 1000;
let objs = new Array(INST_COUNT).fill().map(o => {
	let obj = new THREE.Object3D();
  obj.position.randomDirection().multiplyScalar(2);
  obj.userData.initPosition = obj.position.clone();
  obj.userData.finalPosition = new THREE.Vector3().randomDirection().multiplyScalar(5);
  obj.updateMatrix();
  return obj;
});
let g = new THREE.BoxGeometry();
g.scale(0.1, 0.1, 0.1);
let m = new THREE.MeshLambertMaterial();
let box = new THREE.InstancedMesh(g, m, INST_COUNT);
objs.forEach((o, idx) => {
	box.setMatrixAt(idx, o.matrix);
});
scene.add(box);

window.addEventListener("resize", onWindowResize);
btnMove.addEventListener("click", event => {
	
  console.log(gsap);
  
  let val = {val: 0};
  gsap.fromTo(val, {val: 0}, {val: 1,
  	onUpdate: () => {
    	objs.forEach( (o, idx) => {
      	let oud = o.userData;
  			o.position.lerpVectors(oud.initPosition, oud.finalPosition, val.val);
        o.updateMatrix();
				box.setMatrixAt(idx, o.matrix);
      })
      box.instanceMatrix.needsUpdate = true;
    }
  })
  
})

animate();

function animate() {

  requestAnimationFrame( animate );
  renderer.render(scene, camera);

}

function onWindowResize() {

 ...