Creating an Interactive 3D Cluster with Three.js, TSL and Three Start

import { Object3DBehaviour } from "three-start";

export class Spin extends Object3DBehaviour {
  #initRotY = 0

  speed = 1

  constructor(speed = 1) {
    super()
    this.speed = speed
  }

  onUpdate() {
    // Make the object spin around the y-axis.
    // The rotation is frame indepentent thanks to the usage of the delta time.
    const dt = this.ctx.getDeltaTime()
    this.object.rotation.y += dt * this.speed
  }

  onDestroy() {
    this.object.rotation.y = this.#initRotY
  }
}

import './style.css';
import * as THREE from "three/webgpu"
import { sobel } from 'three/addons/tsl/display/SobelOperatorNode'
import { bayerDither } from 'three/addons/tsl/math/Bayer'
import { ThreeStart, ThreeContextEvents, addComponent } from "three-start"
import { InnerMaterial } from "./materials/Inner"
import { ClusterMaterial, map } from "./materials/Cluster"
import { Spin } from "./behaviors/Spin"
import { HoverEffect } from "./behaviors/HoverEffect"
import { Fn } from 'three/tsl'

const starter = new ThreeStart()

starter.mount(document.getElementById("app"))
starter.start()

const { scene, camera, renderPipeline, scenePass } = starter.ctx

camera.position.z = 4

const innerGeometry = new THREE.IcosahedronGeometry(1, 1)
const innerMesh = new THREE.Mesh(innerGeometry, InnerMaterial)
innerMesh.name = 'innerMesh'
addComponent(innerMesh, Spin, -0.4)
addComponent(innerMesh, HoverEffect)
scene.add(innerMesh)

const textureLoader = new THREE.TextureLoader()
const matcap = await textureLoader.loadAsync('/yellow-18.png')
matcap.colorSpace = THREE.SRGBColorSpace
map.value = matcap

function createExtrudedFaces(mesh) {
  if (!mesh) return console.error('Mesh is required')

  const { geometry } = mesh
  const { position: meshPosition } = mesh
  const positionAttribute = geometry.getAttribute('position')
  const { length: numVertices } = positionAttribute.array
  const faceCentroid = new THREE.Vector3()
  const faceDirection = new THREE.Vector3()
  const instanceMatrix = new THREE.Matrix4()

  // We need to count how many faces the base mesh has.
  // We can calculate it by dividing the number of vertices by the number of vertices per face.
  // Each face has 3 vertices, and each vertex has 3 components (x, y, z), so we divide by 9.
  const numFaces = numVertices / 9

  // Create the batched mesh
  const facesMesh = new THREE.BatchedMesh(
    numFaces,
    numVertices * 6,
    numVertices * 6,
    ClusterMaterial,
  )

  facesMesh.name = 'facesMesh'

  // Iterate over the vertices of the base mesh; 9, so 1 face, per loop iteration.
  // For each loop iteration, we need to create a new instance geometry.
  // The instance geometry will be a triangle with the same vertices as the base mesh.
  let i
  for (i = 0; i < numVertices; i += 9) {
    // Get the vertices of the face.
    const x1 = positionAttribute.array[i + 0]
    const y1 = positionAttribute.array[i + 1]
    const z1 = positionAttribute.array[i + 2]

    const x2 = positionAttribute.array[i + 3]
    const y2 = positionAttribute.array[i + 4]
    const z2 = positionAttribute.array[i + 5]

    const x3 = positionAttribute.array[i + 6]
    const y3 = positionAttribute.array[i + 7]
    const z3 = positionAttribute.array[i + 8]

    // Calculate the centroid
    faceCentroid.set(x1 + x2 + x3, y1 + y2 + y3, z1 + z2 + z3).divideScalar(3)

    // Calculate the normal of the face by subtracting the centroid from the mesh position and normalizing the result.
    faceDirection.copy(faceCentroid).sub(meshPosition).normalize()

    const faceExtrusion = 0.45

    const x4 = x1 + faceDirection.x * faceExtrusion
		const y4 = y1 + faceDirection.y * faceExtrusion
		const z4 = z1 + faceDirection.z * faceExtrusion

		const x5 = x2 + faceDirection.x * faceExtrusion
		const y5 = y2 + faceDirection.y * faceExtrusion
		const z5 = z2 + faceDirection.z * faceExtrusion

		const x6 = x3 + faceDirection.x * faceExtrusion
		const y6 = y3 + faceDirection.y * faceExtrusion
		const z6 = z3 + faceDirection.z * faceExtrusion

    // Create the instance geometry.
    const instanceGeometry = new THREE.BufferGeometry()

    // Create the `position` attribute array for the instance geometry.
    const attributeArray = new Float32Array([
      x1, y1, z1,
      x3, y3, z3,
      x2, y2, z2,

      x1, y1, z1,
      x2, y2, z2,
      x4, y4, z4,

      x2, y2, z2,
      x5, y5, z5,
      x4, y4, z4,

      x2, y2, z2,
      x3,	y3,	z3,
      x5,	y5,	z5,

      x3, y3, z3,
      x6, y6, z6,
      x5, y5, z5,

      x3, y3, z3,
      x1, y1, z1,
      x6, y6, z6,

      x1, y1, z1,
      x4, y4, z4,
      x6, y6, z6,

      x4, y4, z4,
      x5, y5, z5,
      x6, y6, z6,
    ])
    const posAttribute = new THREE.Float32BufferAttribute(attributeArray, 3)
    instanceGeometry.setAttribute('position', posAttribute)

    // Translate the instance geometry back to the centroid.
    instanceGeometry.translate(-faceCentroid.x, -faceCentroid.y, -faceCentroid.z)

    // Compute the vertex normals for the instance geometry.
    // instanceGeometry.computeVertexNormals()

    // Add the instance geometry to the faces mesh.
    const instanceGeometryID = facesMesh.addGeometry(instanceGeometry)
    const instanceID = facesMesh.addInstance(instanceGeometryID)

    // Set the matrix of the instance.
    instanceMatrix.makeTranslation(faceCentroid.x, faceCentroid.y, faceCentroid.z)
    facesMesh.setMatrixAt(instanceID, instanceMatrix)
   }

  facesMesh.geometry.computeVertexNormals()

  innerMesh.add(facesMesh)
}

createExtrudedFaces(innerMesh)

const scenePassColor = scenePass.getTextureNode()
const scenePassDepth = scenePass.getTextureNode('depth')

const scenePassSobel = sobel(scenePassDepth)
const sobelPass = Fn(() => {
  return scenePassSobel.step(0.01)
})()

const outputPass = Fn(() => {
  const result = scenePassColor.add(sobelPass)
  result.assign(bayerDither(result))

  return result
})()

renderPipeline.outputNode = outputPass

import { MeshBasicNodeMaterial, DataTexture } from 'three/webgpu'
import {
  attribute,
  positionLocal,
  Fn,
  float,
  mx_noise_float,
  time,
  vec3,
  normalWorld,
  positionWorld,
  mix,
  dot,
  modelWorldMatrix,
  uniform,
  matcapUV,
  texture
} from 'three/tsl'
import { hoverEffect } from './Inner'

const dummyTexture = new DataTexture(new Uint8Array([0, 0, 0, 0]), 1, 1)

export const ClusterMaterial = new MeshBasicNodeMaterial()

export const map = uniform(dummyTexture)

const scaleMin = float(0.15)
const scaleMax = float(0.75)
const centered = attribute('position', 'vec3')
const centroid = positionLocal.sub(centered)

const centroidWS = modelWorldMatrix.mul(centroid)
const hover = hoverEffect(centroidWS)

// Set the colors.
// ColorA is the color when the face is facing the center of the mesh.
// ColorB is the color when the face is facing away from the center of the mesh.
const colorA = vec3(0.8)
const colorB = vec3(0)

// Calculate a normalize vector that goes from the mesh instance to the center of the world.
const toOrigin = vec3(0).sub(positionWorld).normalize()

// Calculate the dot product and remap it to the [0, 1] range.
const dotRemapped = dot(normalWorld, toOrigin).remap(-1, 1, 0, 1)

ClusterMaterial.colorNode = Fn(() => {
  const toOrigin = vec3(0).sub(positionWorld).normalize()
  const dotRemapped = dot(normalWorld, toOrigin).remap(-1, 1, 0, 1)
  const matcap = texture(map.value, matcapUV).toVec3()

  const colAToMatcap = mix(colorA, matcap, hover)

  // Mix the colors based on the dot product.
  // The dot product is altered with the smoothstep function only for visual purposes.
  // This way the sides have a darker color.
  return mix(colorB, colAToMatcap, dotRemapped.smoothstep(0.35, 0.95))
})()

ClusterMaterial.positionNode = Fn(() => {
  const t = time.mul(0.5)

  const noise = mx_noise_float(centroid.yz.add(t))
  noise.remapAssign(-1, 1, scaleMin, scaleMax)

  // Additional scale factor based on the hover effect,
  // remapped to the [0, 0.45] range just not to go too high with the final value
  const scaleByHover = hover.remap(0, 1, 0, 0.45)

  return centroid.add(centered.mul(noise.add(scaleByHover)))
})()

import { Fn, uniform, vec3, positionWorld, distance } from 'three/tsl'
import { MeshBasicNodeMaterial, BackSide } from 'three/webgpu'

export const InnerMaterial = new MeshBasicNodeMaterial({
  side: BackSide,
  colorWrite: false,
  depthWrite: false,
})

export const hoverPointWS = uniform(vec3(0))
export const effectStrength = uniform(0)

// Function to calculate the hover effect based on the position in world space.
// It calculates the distance between the position and the hover point,
// clamps it in the range [0, 1], and then applies a smoothstep function to it.
// Then multiplies the result by the effect strength because we're going to fade it /inout.
//
// This function is exported because we're going to use it in the ClusterMaterial as well.
export const hoverEffect = Fn(([positionWS]) => {
  return distance(positionWS, hoverPointWS)
          .clamp(0, 1)
          .smoothstep(0.8, 0.2)
          .mul(effectStrength)
})

InnerMaterial.colorNode = Fn(() => {
  return hoverEffect(positionWorld)
})()

:root {
	--text: #6b6375;
	--text-h: #08060d;
	--bg: #fff;
	--border: #e5e4e7;
	--code-bg: #f4f3ec;
	--accent: #aa3bff;
	--accent-bg: rgba(170, 59, 255, 0.1);
	--accent-border: rgba(170, 59, 255, 0.5);
	--social-bg: rgba(244, 243, 236, 0.5);
	--shadow:
		rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

	--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
	--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
	--mono: ui-monospace, Consolas, monospace;

	font: 18px/145% var(--sans);
	letter-spacing: 0.18px;
	color-scheme: light dark;
	color: var(--text);
	background: var(--bg);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	@media (max-width: 1024px) {
		font-size: 16px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--text: #9ca3af;
		--text-h: #f3f4f6;
		--bg: #16171d;
		--border: #2e303a;
		--code-bg: #1f2028;
		--accent: #c084fc;
		--accent-bg: rgba(192, 132, 252, 0.15);
		--accent-border: rgba(192, 132, 252, 0.5);
		--social-bg: rgba(47, 48, 58, 0.5);
		--shadow:
			rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
	}
}

body {
	margin: 0;
}

#app {
	width: 100%;
	overflow: hidden;
	text-align: center;
	border-inline: 1px solid var(--border);
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

Creating an Interactive 3D Cluster with Three.js, TSL and Three Start
Original author: Francesco Michelini
Published by Codrops. Copyright (c) 2026 Codrops.
License: MIT, pursuant to the publisher's downloadable-demo grant.
Keep CODROPS-MIT-2026.txt and the original project notices with copies.
Third-party media exceptions and credits are recorded separately in the source inventory.

GSAP standard license snapshot
Source: https://gsap.com/community/standard-license/
Retrieved: 2026-09-22T04:22:49.089Z
Original distribution copyright and version headers remain in the runtime code.

Standard "No Charge" GSAP License

 I. DEFINITIONS

 “GSAP License” means the terms and conditions of this GSAP Software License Agreement.

 "GSAP Products" means any Software made available at gsap.com (https://gsap.com) or any successor sites, including but not limited to the GSAP animation library and related plugins, tools, or extensions.

 "Permitted Uses" means the implementation and/or use of GSAP Products on any website, web application, or digital interface by any person or entity (which may include, for clarity, those of companies that compete with Webflow in other areas of business).

 "Prohibited Uses" means any implementation and/or use of GSAP Products in tools that allow users to build visual animations without code that encourages, induces, or materially assists in creating a solution that competes with Webflow’s visual animation building capabilities.

 "Competitive Products" means any software, tool, or service that enables users to create, edit, or manage animations through a visual interface or builder similar to Webflow (https://webflow.com).

 II. GRANT OF LICENSE

 Subject to the terms and conditions of this GSAP License, Webflow grants you a non-exclusive, worldwide license to use, reproduce, display, and implement GSAP Products solely for Permitted Uses.

 III. RESTRICTIONS

 You may not:

 Use any GSAP Products for any Prohibited Uses without prior written consent;

 Reverse engineer any GSAP Products for the purpose of creating Competitive Products;

 Remove or alter any proprietary notices or branding from GSAP Products.

 IV. OWNERSHIP AND INTELLECTUAL PROPERTY

 All intellectual property rights in GSAP Products, including but not limited to copyright, patents, trademarks, and trade secrets, remain the exclusive property of Webflow. This GSAP License does not transfer any ownership rights in GSAP Products to you.

 V. TERMINATION

 Webflow may terminate this GSAP License and revoke your access in its discretion if you fail to comply with any of these terms and conditions. Upon termination, you must cease all use of GSAP Products and destroy all copies in your possession.

 VI. MISCELLANEOUS PROVISIONS

 General: This GSAP License is incorporated into and subject to Webflow’s Terms of Service available here (https://webflow.com/legal/terms) ("Terms of Service"). In the event of any conflict or inconsistency between this GSAP License and the Terms of Service, the terms of this GSAP License shall govern in relation to your use of any GSAP Products.

 Amendments: Webflow reserves the right to update or modify this GSAP License at any time by posting the revised terms on this website, provided that any such updates or modifications shall not result in any material degradation to the security, integrity, or functionality of any GSAP Products. You understand and agree that your continued use of any GSAP Products after such revisions to this GSAP License constitutes your acceptance of this GSAP License as revised. If you do not accept the revised GSAP License, you are prohibited from using versions of the GSAP Products released after the effective date of the revised GSAP License (as well as any updates made to previous versions). Notwithstanding, you may continue using previous versions of GSAP Products under the applicable terms licensed to you prior to the effective date of the revised GSAP License (for clarity, excluding any updates made thereto).

 No Waiver: Failure of Webflow to enforce any provision of this GSAP License shall not constitute a waiver of future enforcement of that or any other provision.

 FAQ

 Is it acceptable for AI tools like ChatGPT, Cursor, Lovable, Webstudio, etc. to generate GSAP code?
 Absolutely! AI-generated code is not a "Prohibited Use".

 What if a WordPress plugin or theme or other niche tool allows users to create GSAP-driven effects through a visual interface? Is that prohibited?
 We want to encourage developers to build on top of GSAP, including visual tools that don't directly compete with Webflow's rich animation-building capabilities. If you are not sure if your product might be considered a "Prohibited Use", feel free to contact us (https://gsap.com/contact) so we can talk through it!

 Can I really use GSAP in commercial projects without paying anything?
 Yes, really! Commercial usage is covered under the standard license. All of GSAP including the plugins that were formerly "members-only" like SplitText (https://gsap.com/docs/v3/Plugins/SplitText/) and MorphSVG (https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) can be used in commercial projects at no charge. Enjoy! 💚

 Effective date: April 30, 2025

 Last modified date: May 30, 2025

 Copyright (©) 2025, Webflow


three@0.185.1 — LICENSE
The MIT License

Copyright © 2010-2026 three.js authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


eventemitter3@5.0.4 — LICENSE
The MIT License (MIT)

Copyright (c) 2014 Arnout Kazemier

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


three-start@0.1.3 — LICENSE
MIT License

Copyright (c) 2026 Vladislav Kruteniuk

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.