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.
Table of contents
Destructuring the whole effectWhat we will be usingA note about Three StartProject setupAdding our base icosahedronCreating the faces… and extruding themAnimate the instances with noiseBefore working on colorsColors, colors, colorsAdding some interactionPlaying with scalesAdding the final color twistPost-processingFinal wordsCreditsQuestions 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.