JSFiddle - React, Tailwind, and code Playground

by Cody Bennett

JavaScript

import { Expo, gsap } from 'https://unpkg.com/gsap';
import {
  WebGLRenderer,
  PerspectiveCamera,
  Scene,
  Face3,
  Geometry,
  Mesh,
  MeshStandardMaterial,
  Vector3,
  Clock,
  Group,
} from 'https://unpkg.com/three/build/three.module.js';

const renderer = new WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;

const scene = new Scene();

const count = 600;
const vertexMax = 10;
const vertexMin = 3;
const groupDelta = Math.PI / 64;
const individualDelta = Math.PI / 8;
const startSpeed = 32;
const tweenDuration = 6;
const clock = new Clock();
const rotationAxis = new Vector3(1, -1, 0).normalize();

const speed = {
  current: startSpeed
};
let speedDropped = false;

const fragments = new Group();
scene.add(fragments);

const getVertexRandom = () => Math.random() * (vertexMax - vertexMin) + vertexMin;

const material = new MeshStandardMaterial({ color: 0x909090 });

for (let i = 0; i < count; i += 1) {
  const geometry = new Geometry();

  geometry.vertices.push(
    new Vector3(-getVertexRandom(), 0, 0),
    new Vector3(0, 0, getVertexRandom()),
    new Vector3(getVertexRandom(), 0, 0),
    new Vector3(0, getVertexRandom(), 0)
  );

  geometry.faces.push(
    new Face3(0, 1, 3),
    new Face3(1, 2, 3),
    new Face3(2, 0, 3),
    new Face3(0, 2, 1)
  );

  geometry.computeFaceNormals();

  const fragment = new Mesh(geometry, material);

  const rotationAxis = new Vector3(
    Math.random() * 2 - 1,
    Math.random() * 2 - 1,
    Math.random() * 2 - 1
  ).normalize();

  fragment.rotateOnAxis(rotationAxis, Math.random() * Math.PI);

  const translationAxis = new Vector3(
    Math.random() * 2 - 1,
    Math.random() * 2 - 1,
    Math.random() * 2 - 1
  ).normalize();

  fragment.userData = {
    rotationAxis,
    translationAxis
  };

 ...