# React-three-fiber reactjs

**URL:** <https://discourse.threejs.org/t/react-three-fiber-reactjs/41351>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [August 12, 2022, 3:12pm UTC](https://discourse.threejs.org/t/react-three-fiber-reactjs/41351 "2022-08-12T15:12:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Claudia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/claudia/32/28738_2.png) [@Claudia](https://discourse.threejs.org/u/Claudia)\
**Post date:** [August 12, 2022, 3:12pm UTC](https://discourse.threejs.org/t/react-three-fiber-reactjs/41351/1 "2022-08-12T15:12:25Z")

</div>

hi i wanted to ask i wanted to create a template like the mainpage here using reactjs.

> **[Welcome to Yuga Labs, Home of BAYC, MAYC, Otherside, Cryptopunks, and Meebits](https://yuga.com/)**
>
> Powered by ApeCoin and shaping web3 through storytelling, experiences, and community. From the creators of Bored Ape Yacht Club.

but im a newbie. can someone guide me what are the process i needed do. as of now i already install thr react-three-fiber and also three.

---

<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 12, 2022, 5:18pm UTC](https://discourse.threejs.org/t/react-three-fiber-reactjs/41351/2 "2022-08-12T17:18:51Z")

</div>

i think this has more to do with writing a shader than with both threejs and react. you would implement a shader in fiber in the same way you do it in three. i know nothing that looks exactly like that, maybe this one [Pixel Distortion Effect with Three.js | Codrops](https://tympanus.net/codrops/2022/01/12/pixel-distortion-effect-with-three-js/)

---

<div class="post-metadata">

**Author:** ![Claudia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/claudia/32/28738_2.png) [@Claudia](https://discourse.threejs.org/u/Claudia)\
**Post date:** [August 13, 2022, 9:02am UTC](https://discourse.threejs.org/t/react-three-fiber-reactjs/41351/3 "2022-08-13T09:02:07Z")

</div>

hello this one is there any sample that most likely to reactjs? cause im a newbie i tried to put the code in my reactjs project but got error

---

<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 13, 2022, 9:24am UTC](https://discourse.threejs.org/t/react-three-fiber-reactjs/41351/4 "2022-08-13T09:24:32Z")

</div>

shaders are in its own language, glsl, that’s where 90% of the implementation lies. the rest is just threejs and dom glue code. it can be hard to untangle these huge vanilla oop projects because the code forms a single clump. if you need something to practice try picking something less threatening first: [https://twitter.com/0xca0a/status/1501536645195218949](https://twitter.com/0xca0a/status/1501536645195218949) and then step up.

---

<div class="post-metadata">

**Author:** ![Claudia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/claudia/32/28738_2.png) [@Claudia](https://discourse.threejs.org/u/Claudia)\
**Post date:** [August 14, 2022, 4:46am UTC](https://discourse.threejs.org/t/react-three-fiber-reactjs/41351/5 "2022-08-14T04:46:07Z")

</div>

okayy, but is there anyway to convert this threejs code [three.js examples](https://threejs.org/examples/#webgl_interactive_raycasting_points) into reactjs code? sorry yeah a really bit new

---

<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 14, 2022, 11:45am UTC](https://discourse.threejs.org/t/react-three-fiber-reactjs/41351/6 "2022-08-14T11:45:22Z")

</div>

thats just a regular THREE.Points [Point cloud - CodeSandbox](https://codesandbox.io/s/point-cloud-zsyu9?file=/src/App.js) raycasting is inbuilt into fiber so you only have to figure out how they calculated the positions