Workshop: Creating nice 3D scenes with React Three Fiber

You will learn how to use Three.js and React to create nice looking and performant 3D scenes.

Coach — Yuri Artiukh, frontend evangelist and co-founder of Coderiver.
From the author: I will also get deeper into shaders and how they can help with that. We will replicate basic lighting with shaders, and also animate geometries using shaders. I will also show how you can connect animations with scroll. In the Q&A part i will be happy to help you with your current problems related to 3D or three.js

Program:

During the workshop you will:
• Build a scene in three.js
• Build a scene in React Three Fiber
• Use postprocessing and advanced lighting techiques to make it nice
• Integrate it into existing HTML and scroll
• Learn how to use shaders to make performant animations

Format:

Date and time: July 22, 10:00 - 15:30, (Kyiv time, GMT+3).

Platform: Zoom

Language of the event and presentation: Ukrainian

Number of participants: 20

Requirements for participants: For participation at the workshop, you need to have some terminal knowledge (clone git repository, pipe two commands, etc.) and basic js/react skills. During the workshop, you will need these tools:

your favorite IDE

Agenda

• 10:00 - 10:15 - Intro + introduction
• 10:15 - 11:00 - The basic structure of scenes in Three.js
• 11:00 - 12:00 - How to make beautiful scenes in React Three Fiber
• 12:00 - 12:15 - Coffee break
• 12:15 - 12:45 - Work with 3D assets
• 12:45 - 13:15 - Integration of scenes in HTML
• 13:15 - 15:00 - Using shaders and shader animations
• 15:00 - Q&A session