# I'm trying to figure out if there's a way to manipulate a 3js window from react, if that's possible

**URL:** <https://discourse.threejs.org/t/im-trying-to-figure-out-if-theres-a-way-to-manipulate-a-3js-window-from-react-if-thats-possible/41326>\
**Category:** Questions\
**Tags:** react, threejs\
**Created:** [August 11, 2022, 2:09pm UTC](https://discourse.threejs.org/t/im-trying-to-figure-out-if-theres-a-way-to-manipulate-a-3js-window-from-react-if-thats-possible/41326 "2022-08-11T14:09:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gursheesh\_Kour](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gursheesh_kour/32/28717_2.png) [@Gursheesh\_Kour](https://discourse.threejs.org/u/Gursheesh_Kour)\
**Post date:** [August 11, 2022, 2:09pm UTC](https://discourse.threejs.org/t/im-trying-to-figure-out-if-theres-a-way-to-manipulate-a-3js-window-from-react-if-thats-possible/41326/1 "2022-08-11T14:09:18Z")

</div>

So, this is what my window is supposed to look like;  
And the left section is supposed to be made in react -

 ![Screen Shot 2022-08-11 at 9.42.08 AM](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/3X/4/6/460d3163312c5d1f045df1154a73306eb8eff0c2.jpeg)  
Is there a way that I can use the buttons (from react window) to manipulate the mesh (3js).  
Or if it’s just an over complication.  
Let me know any suggestions or directions in which I should go.

---

<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:** [August 11, 2022, 9:00pm UTC](https://discourse.threejs.org/t/im-trying-to-figure-out-if-theres-a-way-to-manipulate-a-3js-window-from-react-if-thats-possible/41326/2 "2022-08-11T21:00:25Z")

</div>

react should drive the app period. if your app lets react control the UI and threejs runs as a blackbox inside a useeffect the app is practically set up to fail. grabbing into an imperative system by queries and mutation is fundamentally wrong, this is what react was made to prevent in the first place.

react-dom renders jsx to the dom, react-three-fiber renders jsx to threejs. the dom and threejs are one, driven by the same state model, composed of re-usable components.

---

<div class="post-metadata">

**Author:** ![Gursheesh\_Kour](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gursheesh_kour/32/28717_2.png) [@Gursheesh\_Kour](https://discourse.threejs.org/u/Gursheesh_Kour)\
**Post date:** [August 11, 2022, 9:20pm UTC](https://discourse.threejs.org/t/im-trying-to-figure-out-if-theres-a-way-to-manipulate-a-3js-window-from-react-if-thats-possible/41326/3 "2022-08-11T21:20:53Z")

</div>

What I understand from your reply is that, I shouldn’t manipulate 3js object from react components, then how can I achieve something like this? Any directions that I should move forward with?

---

<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:** [August 11, 2022, 9:33pm UTC](https://discourse.threejs.org/t/im-trying-to-figure-out-if-theres-a-way-to-manipulate-a-3js-window-from-react-if-thats-possible/41326/4 "2022-08-11T21:33:00Z")

</div>

just like you construct the ui with `<div>` and `<span>` you construct the three scene with `<mesh>` and `<boxGeometry>`. if both worlds are declarative then they also react to state and props naturally. this is fundamentally what react is for. build your app as you always would and use this for the threejs part: [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)