# ThreeJS or R3F - technology pick

**URL:** <https://discourse.threejs.org/t/threejs-or-r3f-technology-pick/57973>\
**Category:** Discussion\
**Tags:** threejs, react-three-fiber\
**Created:** [November 9, 2023, 3:54pm UTC](https://discourse.threejs.org/t/threejs-or-r3f-technology-pick/57973 "2023-11-09T15:54:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rciepichal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rciepichal/32/41325_2.png) [@rciepichal](https://discourse.threejs.org/u/rciepichal)\
**Post date:** [November 9, 2023, 3:54pm UTC](https://discourse.threejs.org/t/threejs-or-r3f-technology-pick/57973/1 "2023-11-09T15:54:09Z")

</div>

Hey,

I have a dillema, we are on the beginning of the big project and we need to decide to pick ThreeJS (class approach) or R3F. That’s gonna be app where user can customise clothes. Probably, there is a chance that app is gonna be implemented as a iframe on different site. Our devs know react but in the future we want to hire new devs with a knowledge of threeJS and here R3F is additional requirement.

Is there any edge cases in R3F? Something that can be done in three js but not in R3F?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 9, 2023, 4:00pm UTC](https://discourse.threejs.org/t/threejs-or-r3f-technology-pick/57973/2 "2023-11-09T16:00:44Z")

</div>

> [@rciepichal](#):
>
> big project

1. Then go with react-three-fiber - since you’ve mentioned you have devs experienced in react, the reasons behind going with r3f instead of vanilla three.js are quite the same as going with react instead of vanilla javascript + HTML.

> [@rciepichal](#):
>
> devs with a knowledge of threeJS and here R3F is additional requirement

1. Looking at dev community of three.js - since people learn from similar resources - most commercially-active three.js devs will also be familiar with r3f, so this shouldn’t be much of an issue.

> [@rciepichal](#):
>
> Something that can be done in three js but not in R3F?

1. The advantage of going with r3f is that you don’t really _have to_ use react-syntax / state flow all the time. If you feel better doing imperative code, you can do that in react-three-fiber as well, just put vanilla three.js code in `useMemo` / `useRef` / `useEffect` and you’re good to go. It doesn’t work the other way - so going with vanilla you are losing access to [drei](https://github.com/pmndrs/drei), to react state flow, [simple event handling](https://docs.pmnd.rs/react-three-fiber/tutorials/events-and-interaction), and quite a few other things that r3f tends to make easier. Then, if something is not ready made in r3f, you can always just code it in vanilla three.js as a custom class, and add to your r3f project (r3f is three.js, just written differently, so you are not going to get compatibility issues trying to add vanilla three code.)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 9, 2023, 5:15pm UTC](https://discourse.threejs.org/t/threejs-or-r3f-technology-pick/57973/3 "2023-11-09T17:15:05Z")

</div>

fiber is threejs, anything that three can do so can fiber. but there are many things fiber can do that three can’t because of the differences between declarative functional programming and oop. for instance composition. it has developed an eco system because of it. the showcase demonstrates what a difference it makes [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/examples) otherwise everything mj said.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 9, 2023, 5:25pm UTC](https://discourse.threejs.org/t/threejs-or-r3f-technology-pick/57973/4 "2023-11-09T17:25:49Z")

</div>

ps, customizing clothes

> **[T-Shirt configurator - CodeSandbox](https://codesandbox.io/s/ioxywi)**
>
> T-Shirt configurator by drcmda using @pmndrs/branding, @react-three/drei, @react-three/fiber, @types/three, framer-motion, maath, react, react-colorful, react-dom

there’s a full tutorial about it, too if you’re interested [https://www.udemy.com/course/react-three-fiber-configurator](https://www.udemy.com/course/react-three-fiber-configurator)

---

<div class="post-metadata">

**Author:** ![rciepichal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rciepichal/32/41325_2.png) [@rciepichal](https://discourse.threejs.org/u/rciepichal)\
**Post date:** [November 10, 2023, 7:26am UTC](https://discourse.threejs.org/t/threejs-or-r3f-technology-pick/57973/5 "2023-11-10T07:26:57Z")

</div>

thank you everyone for answers!