--- title: Creating an Interactive 3D Cluster with Three.js, TSL... description: A hands-on tutorial walks through building an interactive 3D icosahedron cluster using Three.js with WebGPU, TSL (Three Shading Language), and the new... canonical: https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Creating an Interactive 3D Cluster with Three.js, TSL and Three Start | daily.dev og:description: A hands-on tutorial walks through building an interactive 3D icosahedron cluster using Three.js with WebGPU, TSL (Three Shading Language), and the new... og:url: https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai og:image: https://api.daily.dev/og/posts/Y4seDpfAi.png og:image:alt: Creating an Interactive 3D Cluster with Three.js, TSL and Three Start og:image:width: 1200 og:image:height: 630 og:locale: 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 you extrude the faces of a mesh in Three.js since there's no built-in extrude function? Manually add extra vertices offset along each face's normal direction, then build new triangles connecting the original and offset vertices into a BatchedMesh. Each face's centroid and direction vector are computed from its three vertices, and a face extrusion value (e.g. 0.45) scales how far the new vertices are pushed outward to form the extruded triangle strip. _See how daily.dev surfaces creative-coding techniques like manual mesh extrusion in Three.js._ ### How can I animate individual instances in a Three.js BatchedMesh using noise in TSL? Use TSL's mx_noise_float function seeded with each instance's centroid position plus a time value, then remap the noise output from its default -1 to 1 range to a custom scale range like 0.15 to 0.75. Apply this remapped noise to scale each instance's vertices relative to its centroid inside the material's positionNode, producing organic pulsing movement per instance. _daily.dev helps developers track TSL techniques for shader-driven animation in Three.js projects._ ### 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 and camera setup, and resize events. It lets developers split an application into modules (global features like asset loading or input management) and components (behaviors attached to Object3D instances, such as a reusable Spin behavior with axis and speed parameters). _daily.dev keeps developers choosing between Three.js scaffolding tools like three-start up to date._ ## 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 - [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 - [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 - [Explore This Tactile UI Powered By Real-Time WebGL Shader](https://daily.dev/posts/explore-this-tactile-ui-powered-by-real-time-webgl-shader-unjsszd7a) · 80 LEVEL · 1 upvotes · 0 comments - [THREE.js-PathTracing-Renderer](https://daily.dev/posts/three-js-pathtracing-renderer-f7kf7vkhm) · Hacker News · 2 upvotes · 0 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"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","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai"},"datePublished":"2026-08-12T13:12:14.343Z","dateModified":"2026-09-14T09:32:06.578Z","description":"A hands-on tutorial walks through building an interactive 3D icosahedron cluster using Three.js with WebGPU, TSL (Three Shading Language), and the new...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/80aea27de0b031a3aaaf10edaefca396?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/80aea27de0b031a3aaaf10edaefca396?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"threejs,webgpu,creative-coding","timeRequired":"PT21M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Creating an Interactive 3D Cluster with Three.js, TSL and Three Start"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai#faq","mainEntity":[{"@type":"Question","name":"How do you extrude the faces of a mesh in Three.js since there's no built-in extrude function?","acceptedAnswer":{"@type":"Answer","text":"Manually add extra vertices offset along each face's normal direction, then build new triangles connecting the original and offset vertices into a BatchedMesh. Each face's centroid and direction vector are computed from its three vertices, and a face extrusion value (e.g. 0.45) scales how far the new vertices are pushed outward to form the extruded triangle strip. See how daily.dev surfaces creative-coding techniques like manual mesh extrusion in Three.js."}},{"@type":"Question","name":"How can I animate individual instances in a Three.js BatchedMesh using noise in TSL?","acceptedAnswer":{"@type":"Answer","text":"Use TSL's mx_noise_float function seeded with each instance's centroid position plus a time value, then remap the noise output from its default -1 to 1 range to a custom scale range like 0.15 to 0.75. Apply this remapped noise to scale each instance's vertices relative to its centroid inside the material's positionNode, producing organic pulsing movement per instance. daily.dev helps developers track TSL techniques for shader-driven animation in Three.js projects."}},{"@type":"Question","name":"What is three-start and how does it simplify setting up a Three.js project?","acceptedAnswer":{"@type":"Answer","text":"three-start is a library that bootstraps a Three.js project with minimal code, automatically handling the render loop, renderer and camera setup, and resize events. It lets developers split an application into modules (global features like asset loading or input management) and components (behaviors attached to Object3D instances, such as a reusable Spin behavior with axis and speed parameters). daily.dev keeps developers choosing between Three.js scaffolding tools like three-start up to date."}}]} ```