"React Three Fiber (R3F)" and OOP

Discussion
1

I recently asked how to use Three.js with React, and “React Three Fiber (R3F)” was recommended. So I am learning R3F.

My understanding of R3F is that it is an architecture that renders Three.js scenes as Views. I would like to create objects that inherit Object3D and execute imperative code like normal OOP, but it doesn’t seem feasible as far as I have learned.

If I want to achieve this, I need to construct a scene graph with OOP apart from R3F in the Model (State) , but such a configuration seems to violate the DRY principle.

Am I misunderstanding something fundamental? I am a little confused. Or is R3F not suitable for complex applications (like Game)?

2

You can make games, but react is a paradigm higher than oop. It uses functional programming via the component paradigm. Oop is fundamentally flawed if you wanted to use it for app structure, but either way, you can use your class constructs if you wanted to, react is just JavaScript in the end and wouldn’t prevent you from using any of its features.

It would be better to get familiar with fp and react first. Don’t bring back oop into something that was built to remove it. Your scene graph is a component, a reflection of state. Every component in there is able to communicate, inherit behaviour etc. maybe also look into ECS GitHub - hmans/miniplex: A 👩‍💻 developer-friendly entity management system for 🕹 games and similarly demanding applications, based on 🛠 ECS architecture.

2 Likes
3

Thanks for the reply.

I have learned FP only in theory but never practiced it. I didn’t think it was a practical concept until I started learning React.

Is “Component” in ECS the same concept as “Component” in React? If it is the same concept, did React have “Entity”?

4

ecs is a little different but you would apply miniplex via the react bindings (written in the docs), they would be components.

perhaps, what kind of game do you have in mind, i could look if i find some templates or similar projects that might help you.