--- title: "Creating an Interactive 3D Cluster with Three.js, TSL and Three Start" url: https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai source_url: https://tympanus.net/codrops/2026/08/12/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start type: article source: "Codrops" published: 2026-08-12T13:12:14.343Z updated: 2026-08-12T13:12:43.682Z tags: ["threejs", "webgpu", "creative-coding"] reading_time: 21 upvotes: 2 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Creating an Interactive 3D Cluster with Three.js, TSL and Three Start **[Codrops](https://daily.dev/sources/codrops)** · 21 min read · 2 upvotes · 0 comments ## Summary A hands-on tutorial walks through building an interactive 3D icosahedron cluster using Three.js with WebGPU, TSL (Three Shading Language), and the new three-start helper library. It covers creating extruded faces with BatchedMesh, animating them with noise functions, adding mouse-hover raycasting interaction with GSAP, applying matcap textures, and finishing with Sobel edge detection and dithering post-processing effects. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I extrude the faces of an icosahedron in Three.js since there's no built-in extrude function? Three.js does not offer built-in face extrusion, so it must be done manually by computing each face's centroid and direction vector, then creating three additional vertices translated outward along that direction by a chosen extrusion amount, and building a new geometry from the original plus extruded vertices to form the extruded shape. _See the full walkthrough on daily.dev for building extruded 3D face geometry in Three.js._ ### What is three-start and how does it simplify setting up a Three.js project? three-start is a library that bootstraps a Three.js project with minimal code, automatically handling the render loop, renderer, camera setup, and resize events. It lets developers split applications into modules (global features like asset loading or physics) and components (behaviors attached to individual Object3D instances, such as a reusable Spin behavior with axis and speed parameters). _Track new tools like three-start for structuring Three.js apps by following daily.dev._ ### How can I create a mouse hover interaction effect on a 3D mesh using TSL in Three.js? Cast a ray from the pointer using a raycaster against an invisible inner mesh, then update a uniform holding the hit point's world-space coordinates with GSAP tweening. In the material's TSL colorNode, calculate the distance between each vertex position and that hover point uniform, clamp and smoothstep it, then multiply by an animated effect-strength uniform to fade the effect in and out. _daily.dev surfaces tutorials like this one for developers building pointer-driven shader interactions._ ## Similar posts on daily.dev - [Exploring Procedural Geometry with Three.js and WebGPU](https://daily.dev/posts/exploring-procedural-geometry-with-three-js-and-webgpu-fmy1y3gze) · Codrops · 1 upvotes · 0 comments - [Building an Interactive Wave Propagation Cube Grid with Three.js](https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10) · Codrops · 1 upvotes · 0 comments - [3D Web Development with Blender and Three.js](https://daily.dev/posts/3d-web-development-with-blender-and-three-js-i4xuekmxb) · freeCodeCamp · 3 upvotes · 0 comments - [Interactive Video Projection Mapping with Three.js](https://daily.dev/posts/interactive-video-projection-mapping-with-three-js-knw7llb97) · Codrops · 57 upvotes · 3 comments --- Tags: [#threejs](https://daily.dev/tags/threejs), [#webgpu](https://daily.dev/tags/webgpu), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai)