[Paid] Knowledge Transfer and Help me set up React Three Fiber project

Jobs
, , , ,
1

American / Native English speakers only.

I need an experienced React Three Fiber developer to explain certain aspects of React Three Fiber to me, speed up my understanding of working with and creating applications in React Three Fiber, and help me to set up my application for scalability and success in the future. This includes ensuring files im using as gltf’s are optimized, the app structure is set up correctly, UI questions, animation questions, etc.

I have some experience working in three.js before and am attempting to learn react three fiber now. I am a backend dev by trade and do not have much experience with React. Essentially I need someone to point me in the right direction and make sure the map im getting directions from is correct. I would like this to be a 1-1.5 hourish video call with the option to reach out in the future to pay for more “advice” sessions.

I don’t need you to build anything, just explain some concepts to me and give me a head start.

Example Questions I need answers to:
How should animations be saved in blender?
What are the best settings for exporting gltf models from blender?
How can I animate these models within R3F?
What is the best way to set up file structure within the app?
Is it better to use JSX or GLTF?
How can I make objects within my scene interact with each other?
How can I ensure objects have “solid” edges?
Can animations on an object be “triggered” by a different object?
My project will eventually need a login page, what might be a good service for this?
The application will need to remember where the user “left off”, is this possible and how?
I want the user to be able to “add” objects they can choose from a list and I want them to be able to move these objects around on a screen, how can I achieve this?
What are some best practices with R3F?

2

How should animations be saved in blender?

they’re saved automatically

What are the best settings for exporting gltf models from blender?

the defaults

How can I animate these models within R3F?

gltfjsx sets up three.mixer for you and curates the animations GLTF Animations - CodeSandbox

What is the best way to set up file structure within the app?

just like any other. form simple enough components that do their own thing, re-use as much as possible, use state management from the get go, for instance zustand

Is it better to use JSX or GLTF?

gltfjsx creates a jsx, you’re still using the gltf. the jsx just gives you the scene graph. call: npx gltfjsx yourmodel.glb --transform to get a compressed file

How can I make objects within my scene interact with each other?

it depends on what you mean by interact. generally if two things need to know one another then they need to be controlled by a parent. if you mean physics: @react-three/rapier

How can I ensure objects have “solid” edges?

drei/edges, drei/outlines https://twitter.com/0xca0a/status/1767558946435350967

Can animations on an object be “triggered” by a different object?

yes. but again, what does triggered mean. if you mean physics then you can contact events if two things collide, in which you can trigger animations.

My project will eventually need a login page, what might be a good service for this?

anything you want, you need a server. vercel. supabase.

The application will need to remember where the user “left off”, is this possible and how?

sure, either with server state, cookies or localStorage

I want the user to be able to “add” objects they can choose from a list and I want them to be able to move these objects around on a screen, how can I achieve this?

adding is just mounting something components to the scene. your app is state driven, if state says two objects two get mounted, if it says three, three. moving can mean anything again. it will be need math drag n drop with physics and collisions - CodeSandbox

What are some best practices with R3F?

adhere to react guidelines, and React Three Fiber Documentation

7 Likes
3

Thanks @drcmda this is really really good stuff. The problem Im currently struggling with is dynamically adding or “mounting” an object to a scene from a list that exists outside of that scene. I’ve got a few theories in my head but im unsure of the correct way to go about it.

Theory 1: Separate portals exist within a collapsable menu. On expansion the user can click and drag an object from the portal to the scene through the use of clipping? or maybe using an onclick function to create a clone or instance of the object.

Theory 2. The Menu component contains a list of objects with ID’s upon clicking and dragging and instance of said object is created within the scene.

I didn’t want the menu to necessarily be a part of the scene because I figured loading all of the x amount of objects within the scene would be too much. idk…

I’ve also recently discovered Tunnel-Rat which I suspect may be able to help here.

Essentially what I want to be able to do is in this post:
Adding Model Dynamically rendering it twice? - Questions - three.js forum (threejs.org)

But I need to be able to do it in R3F. Could you possibly point me in the right direction here theory wise, or if theres an example that you know of send it my way? Thanks dude.