React Three Fiber Demos
by Gianfranco Zamboni
A set of demos I made to practice for the last chapter of Three JS Journey where I learned to integrate Three JS with React.
Marble Race Game
For the last chapter of Three JS Journey, I was tasked to create a mini game using Three JS and React Three Fiber. Give it a try! You must have a keyboard to play it.
Physics
A lot of cubes falling down and colliding with each other. Used React Three Fiber and Rapier Physics to create this demo.
Simple Portfolio
A computer that has my portfolio website opened. You can navigate through the portfolio as if it the computer was a real one.
Post Processing Effects
A showcase of some post processing effects available in the @react-three/postprocessing library and a "Drunk" effect that I implemented from scratch.
Pointer Events
Used raycasting to detect the meshes that has the cursor over them and listen for click events that affect them: When the cursor is over a clickable mesh, the cursor changes to a pointer and when the mesh is clicked, it changes color.
Portal
A portal scence modelled and textured in Blender. Using React Three Fiber and DREI, I added animated fireflies and an and a nice portal effect.
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
Loaded models in three.js using react three fiber and the Draco Loader. In this case, I used a hamburger I made using blender and a fox provided as sample by Khronos Group.
Environment and Staging
Set up 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
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
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
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
This are the demos made for the Three JS Journey Course before reaching the React Three Fiber Chapter.