React-three-fiber or plain Three.js

Questions
,
1

Hello everyone!
I am working on a project which uses Three.js and React ( and I am newbie with React )
There are 2 options to get started:

  1. Using plain Three.js inside the componentDidMount() method of the App Component, including scene, camera, renderer, mesh, light, …
  2. Using react-three-fiber to build the app.

Which option should I go for?
Thanks,

2

If you use React use r3f, there is no reason not to. React and Three would be two different worlds and in scale hard to reconcile. React was quite literally made to deal with imperative systems like Three: https://twitter.com/0xca0a/status/1282999626782650368?s=19 All in all you will be learning Three much quicker and you will arrive at intended results faster and with less code. It’s basically the same as why you use React for the dom.

2 Likes
3

It seems like it isn’t a MUST to use react-three-fiber to work with both React and Three.js, is it?
Since I just wanna integrate between React and Three.js in my application, and I am new with React so I just wanna find the simple way to go.

Q.

4

there is no must, it would just be pointless. threejs is imperative, react is not. to make an imperative system, where everything is connected to everything else, work over a nested, self-contained component graph is not easy, essentially you will re-create some part of react-three-fiber.

if you are unsure, take those two examples and try to reproduce them in vanilla three, it’s a good learning practice as well:

a spinning, interactive cube: Basic demo - CodeSandbox

loading a gltf: gltf simple example - CodeSandbox

2 Likes
5

Thanks @drcmda ! :slight_smile: