This tutorial guides you through creating a stunning animated displaced sphere using custom shaders with Three.js and React Three Fiber. Key aspects include modifying a built-in Three.js material, displacing vertices for unique shapes, and addressing lighting and shadows post-displacement. Basic knowledge of React and Three.js is required.
Table of contents
OverviewStep 1: Basic setupStep 2: Refactor to use three-custom-shader-materialStep 3: Displace the Shape in the Vertex Shader ChunkStep 4: Fixing the ShadingBonus: Fixing the ShadowsSort: