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/[email protected]";
import {
  OrbitControls
} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { MeshSurfaceSampler } from "https://cdn.skypack.dev/[email protected]/examples/jsm/math/MeshSurfaceSampler";
import gsap from "https://cdn.skypack.dev/[email protected]";

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

let base = new THREE.Mesh(new THREE.SphereGeometry(2, 4, 2), new THREE.MeshBasicMaterial({color: "aqua", wireframe: true}));
scene.add(base);

let sampler = new MeshSurfaceSampler(base).setWeightAttribute( null ).build();

const INST_COUNT = 1000;
let objs = new Array(INST_COUNT).fill().map(o => {
	let obj = new THREE.Object3D();
  sampler.sample(obj.position);
  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,
    duration: 3,
  	onUpdate: () => {
    	objs.forEach( (o, idx) => {
      	let oud = o.userData;
 ...