React Three Fiber Demos

3D Text

3D Text

A simple 3D text between random positioned donuts. Everything here was made using Typescript and Three JS. Here we use DREI and React Three Fiber capabilities to optimize performance and create a lot of copies of the same object.

Loading Models

Loading Models

This demo shows how to load models in three.js using react three fiber and the Draco Loader. In this case, I loaded a hamburger I made using blender and a fox provided as sample by Khronos Group.

Environment and Staging

Environment and Staging

This demo shows how to use environment and staging in three.js. I used the environment map from the three.js official website. I also used the staging component to create a staging area for the scene.

Debug UI

Debug UI

For this demo, I added Leva and r3f-perf libraries to the project. The first one allowed me to easily add debug controls to the scene. The second one creates a monitor that shows performance metrics.

First DREI Application

First DREI Application

DREI is a collection of three.js helpers for react that are useful when building 3D applications. They help you to build 3D applications faster and easier.

First Three JS Fiber App

First Three JS Fiber App

This is my first Three JS Fiber App. It's the first steps to learn how to use Three JS Fiber after learning how to use Three JS on vanilla JS.

Three JS Journey without React

Three JS Journey without React

This are the demos made for the Three JS Journey Course before reaching the React Three Fiber Chapter.