We will learn

1. How to hook a built-in Three.js material to modify it to our liking: Discover the basics of how to intercept and modify pre-existing materials in Three.js, allowing you to customize them to fit your specific projects.

2. How to move the vertices of a mesh to get a stunning shape: Dive into advanced geometry manipulation techniques, where you can move the vertices of a mesh to create dynamic and visually appealing shapes.

3. How to make the lighting respect this new shape: Learn how to adjust the lighting so that it correctly adapts to the new geometries created, ensuring that your rendered objects look realistic and well integrated into the scene.

4. Bonus - How to fix shadows after geometry displacement: As a bonus, we will teach you how to correct shadows so that they are cast properly on the displaced geometries, maintaining visual coherence and immersion in your projects.

With this tutorial, you will not only gain technical knowledge about customizing materials and geometries in Three.js, but you will also learn how to integrate these concepts within the React Three Fiber framework. Get ready to take your 3D graphics development skills to the next level with innovative techniques and amazing results.

Playground