# \#react-three

**URL:** https://discourse.threejs.org/tag/react-three/1193.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Sploshball (Paintball fiction game)](https://discourse.threejs.org/t/sploshball-paintball-fiction-game/93004)

<div class="topic-metadata">

**Author:** [@jmbl1685](https://discourse.threejs.org/u/jmbl1685)\
**Replies:** 8\
**Last updated:** [August 16, 2026, 8:50pm UTC](https://discourse.threejs.org/t/sploshball-paintball-fiction-game/93004 "2026-08-16T20:50:39Z")

</div>

Hi guys, I hope that are well… I would like to share the previous game and would be great if you can test and play a bit and share comments, more ideas, feedbacks, etc Sploshball A first-person paintball game that runs…

---

## [Use Three.js+Augumented reality for all browsers on web (image and surface detection) + react](https://discourse.threejs.org/t/use-three-js-augumented-reality-for-all-browsers-on-web-image-and-surface-detection-react/45913)

<div class="topic-metadata">

**Author:** [@vira4\_company](https://discourse.threejs.org/u/vira4_company)\
**Replies:** 4\
**Last updated:** [February 28, 2026, 4:31am UTC](https://discourse.threejs.org/t/use-three-js-augumented-reality-for-all-browsers-on-web-image-and-surface-detection-react/45913 "2026-02-28T04:31:34Z")

</div>

Hi guys I tested different ways for run AR on web for image tracking like : and Webxr Now I want to find a new one that worked for all browsers and have plane detection and high performance I use react.js for front …

---

## [Strange behaviour when skipping react render cycle R3F](https://discourse.threejs.org/t/strange-behaviour-when-skipping-react-render-cycle-r3f/89001)

<div class="topic-metadata">

**Author:** [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Replies:** 0\
**Last updated:** [January 7, 2026, 11:25am UTC](https://discourse.threejs.org/t/strange-behaviour-when-skipping-react-render-cycle-r3f/89001 "2026-01-07T11:25:05Z")

</div>

Hello guys I hope someone can help me understand whats going on and if what I am doing is some kind of anti-pattern. I am trying stop react from rerendering the AnimatedBox component and only update the values in u…

---

## [HTML Content Positioned Wrong in iOS](https://discourse.threejs.org/t/html-content-positioned-wrong-in-ios/77066)

<div class="topic-metadata">

**Author:** [@tnjsrf](https://discourse.threejs.org/u/tnjsrf)\
**Replies:** 3\
**Last updated:** [March 17, 2025, 2:33pm UTC](https://discourse.threejs.org/t/html-content-positioned-wrong-in-ios/77066 "2025-03-17T14:33:39Z")

</div>

iOS Rendering Issue with \<Html\> from @react-three/drei Hi everyone, I’m a beginner with Three.js, so I apologize in advance if I’m missing something obvious! I’m working on a React + Three.js project using @react-three/…

---

## [Line Positioning issue](https://discourse.threejs.org/t/line-positioning-issue/79515)

<div class="topic-metadata">

**Author:** [@Mohmmad\_Ali](https://discourse.threejs.org/u/Mohmmad_Ali)\
**Replies:** 1\
**Last updated:** [March 15, 2025, 11:11am UTC](https://discourse.threejs.org/t/line-positioning-issue/79515 "2025-03-15T11:11:10Z")

</div>

Hey guys, need a little help here! I am using react-three-fiber and react-three-drei to build an undirected graph in a spherical shape. Nodes (Element.tsx) → Represented as circles Clusters (Blob.tsx) → Larger circles…

---

## [Three.js Expert(React, Three.js)](https://discourse.threejs.org/t/three-js-expert-react-three-js/78362)

<div class="topic-metadata">

**Author:** [@Ruslan0823](https://discourse.threejs.org/u/Ruslan0823)\
**Replies:** 9\
**Last updated:** [March 7, 2025, 8:13am UTC](https://discourse.threejs.org/t/three-js-expert-react-three-js/78362 "2025-03-07T08:13:20Z")

</div>

We are looking for an experienced full-stack developer to build a high-quality 3D configurator similar to Configurator | Eigen aanbouw ontwerpen in drie stappen met but with a unique touch to differentiate it from the or…

---

## [Convert Your Videos to VR Videos with BuildVR's New Feature](https://discourse.threejs.org/t/convert-your-videos-to-vr-videos-with-buildvrs-new-feature/77034)

<div class="topic-metadata">

**Author:** [@Gretxp\_team](https://discourse.threejs.org/u/Gretxp_team)\
**Replies:** 2\
**Last updated:** [January 27, 2025, 8:38am UTC](https://discourse.threejs.org/t/convert-your-videos-to-vr-videos-with-buildvrs-new-feature/77034 "2025-01-27T08:38:40Z")

</div>

Exciting news from BuildVR! We are proud to introduce our latest feature that allows you to convert any video into an immersive VR video easily. With just a few clicks, you can select your video and get a shareable VR vi…

---

## [Pokedex | search to find Pokémon](https://discourse.threejs.org/t/pokedex-search-to-find-pokemon/72805)

<div class="topic-metadata">

**Author:** [@Danah](https://discourse.threejs.org/u/Danah)\
**Replies:** 1\
**Last updated:** [October 14, 2024, 6:27pm UTC](https://discourse.threejs.org/t/pokedex-search-to-find-pokemon/72805 "2024-10-14T18:27:07Z")

</div>

Use the advanced search to find Pokémon by type, weakness, ablity and more! :globe\_with\_meridians: Demo - https://pokedex-danah.vercel.app :link: Source code - GitHub - danah-kim/pokedex: Pokedexcreated with three.js …

---

## [Trying to use EffectComposer with Views in React Three Fiber](https://discourse.threejs.org/t/trying-to-use-effectcomposer-with-views-in-react-three-fiber/72321)

<div class="topic-metadata">

**Author:** [@marcoscarvalho](https://discourse.threejs.org/u/marcoscarvalho)\
**Replies:** 0\
**Last updated:** [October 2, 2024, 7:45pm UTC](https://discourse.threejs.org/t/trying-to-use-effectcomposer-with-views-in-react-three-fiber/72321 "2024-10-02T19:45:39Z")

</div>

Hey you guys, I will try to be direct. I am creating a react three fiber application which will need multiple Views (though I have only one for now), I saw it is better for performance than multiple canvases. The probl…

---

## [Dynamically changing the loaded model](https://discourse.threejs.org/t/dynamically-changing-the-loaded-model/71231)

<div class="topic-metadata">

**Author:** [@yrdnaliv](https://discourse.threejs.org/u/yrdnaliv)\
**Replies:** 1\
**Last updated:** [September 26, 2024, 12:28pm UTC](https://discourse.threejs.org/t/dynamically-changing-the-loaded-model/71231 "2024-09-26T12:28:40Z")

</div>

I have a set of gltf file (links) in a list. This list might change, so I store them in a state (but to keep the example simple, we can assume that it is an array of string, which won’t change, and we can assume there wi…

---

## [Why are viewport units inaccurate when using RenderTexture?](https://discourse.threejs.org/t/why-are-viewport-units-inaccurate-when-using-rendertexture/70005)

<div class="topic-metadata">

**Author:** [@thismarioperez](https://discourse.threejs.org/u/thismarioperez)\
**Replies:** 0\
**Last updated:** [August 28, 2024, 8:13am UTC](https://discourse.threejs.org/t/why-are-viewport-units-inaccurate-when-using-rendertexture/70005 "2024-08-28T08:13:02Z")

</div>

I’ve got a custom mesh that displays an image as a texture and is scaled using the useAspect hook. That mesh is then composed as part of a scene that is rendered within a RenderTexture material. On first render, things l…

---

## [Applying (Logo or Text) Texture to a Tshirt Model](https://discourse.threejs.org/t/applying-logo-or-text-texture-to-a-tshirt-model/68938)

<div class="topic-metadata">

**Author:** [@mohamedabdelrahman326](https://discourse.threejs.org/u/mohamedabdelrahman326)\
**Replies:** 0\
**Last updated:** [August 4, 2024, 3:46pm UTC](https://discourse.threejs.org/t/applying-logo-or-text-texture-to-a-tshirt-model/68938 "2024-08-04T15:46:27Z")

</div>

A Texture Shows in both sides of a tshirt ( mirrored in the back side ) (I’m Web Developer) Beginner usage of blender I’m creating a TShirt Configurator that the user can edit tshirt color and can add multiple logos o…

---

## [\[Help\] useAnimations doesn't clean up animation state](https://discourse.threejs.org/t/help-useanimations-doesnt-clean-up-animation-state/62330)

<div class="topic-metadata">

**Author:** [@DarkoPro](https://discourse.threejs.org/u/DarkoPro)\
**Replies:** 4\
**Last updated:** [March 7, 2024, 7:11pm UTC](https://discourse.threejs.org/t/help-useanimations-doesnt-clean-up-animation-state/62330 "2024-03-07T19:11:53Z")

</div>

To begin with all my models and animations are made by me in blender then i use a npx gltfjsx it autogenerates a jsx files out of the gltf file. Then i render the model and conditionally i play the animations. The issue…

---

## [\[Help\] Animation resetting if the state was generated with a for cycle](https://discourse.threejs.org/t/help-animation-resetting-if-the-state-was-generated-with-a-for-cycle/62373)

<div class="topic-metadata">

**Author:** [@DarkoPro](https://discourse.threejs.org/u/DarkoPro)\
**Replies:** 0\
**Last updated:** [March 6, 2024, 5:30pm UTC](https://discourse.threejs.org/t/help-animation-resetting-if-the-state-was-generated-with-a-for-cycle/62373 "2024-03-06T17:30:58Z")

</div>

To have less repeatability I want to generate a state using a for loop but when ever I call the animation it plays once and then the object disappears while other objects with states that are defined regularly work just …

---

## [How to find 3d model starting and end point of the scene](https://discourse.threejs.org/t/how-to-find-3d-model-starting-and-end-point-of-the-scene/56284)

<div class="topic-metadata">

**Author:** [@ezhil\_46](https://discourse.threejs.org/u/ezhil_46)\
**Replies:** 2\
**Last updated:** [February 16, 2024, 8:12am UTC](https://discourse.threejs.org/t/how-to-find-3d-model-starting-and-end-point-of-the-scene/56284 "2024-02-16T08:12:41Z")

</div>

Hi guys, I need help. How can i achieve this, Based on the given value, the 3D model should be replicated and added to the end of the previous three 3D models. How to find 3d model starting and end point of the scene…

---

## [A separate questions section in the forum?](https://discourse.threejs.org/t/a-separate-questions-section-in-the-forum/60663)

<div class="topic-metadata">

**Author:** [@hofk](https://discourse.threejs.org/u/hofk)\
**Replies:** 10\
**Last updated:** [January 25, 2024, 10:21am UTC](https://discourse.threejs.org/t/a-separate-questions-section-in-the-forum/60663 "2024-01-25T10:21:19Z")

</div>

For some time now, the three.js forum has been flooded with questions relating specifically to R3F. There are also a large number of answers to general questions that only offer a solution specifically with R3F. It seem…

---

## [Visualise Large Amounts of Money in 3D ](https://discourse.threejs.org/t/visualise-large-amounts-of-money-in-3d/54408)

<div class="topic-metadata">

**Author:** [@human](https://discourse.threejs.org/u/human)\
**Replies:** 6\
**Last updated:** [November 30, 2023, 7:38am UTC](https://discourse.threejs.org/t/visualise-large-amounts-of-money-in-3d/54408 "2023-11-30T07:38:16Z")

</div>

Hey guys, I’m excited to share with you a little project I worked on a while back in the hope that it get showcased. Basically, it’s an app that allows users to compare large amounts of money visually. This was a pr…

---

## [How do i replicate this effect in React Three Fiber?](https://discourse.threejs.org/t/how-do-i-replicate-this-effect-in-react-three-fiber/55785)

<div class="topic-metadata">

**Author:** [@Paschal\_Asobirionwu](https://discourse.threejs.org/u/Paschal_Asobirionwu)\
**Replies:** 8\
**Last updated:** [September 8, 2023, 6:01pm UTC](https://discourse.threejs.org/t/how-do-i-replicate-this-effect-in-react-three-fiber/55785 "2023-09-08T18:01:00Z")

</div>

Hi. I’ve been using three.js fora while now and decided to move to react-three. for my first project I decided to replicate this effect I found on codepen: https://codepen.io/chriscourses/pen/aZRzOM since the code is not…

---

## [React-three-drei Overlap \<Line\> component vertice point with Html without affecting the prespective of the scene](https://discourse.threejs.org/t/react-three-drei-overlap-line-component-vertice-point-with-html-without-affecting-the-prespective-of-the-scene/55733)

<div class="topic-metadata">

**Author:** [@SrMarcius](https://discourse.threejs.org/u/SrMarcius)\
**Replies:** 3\
**Last updated:** [September 7, 2023, 9:46am UTC](https://discourse.threejs.org/t/react-three-drei-overlap-line-component-vertice-point-with-html-without-affecting-the-prespective-of-the-scene/55733 "2023-09-07T09:46:31Z")

</div>

Hi, im fairly new to threejs and react-three and im working on a project that consists of various points in a scene conected by a line, these points have the Html react three drei component. My objective is to prevent t…

---

## [can you export three.js as a component?(react)](https://discourse.threejs.org/t/can-you-export-three-js-as-a-component-react/54025)

<div class="topic-metadata">

**Author:** [@Jo\_DeCore](https://discourse.threejs.org/u/Jo_DeCore)\
**Replies:** 19\
**Last updated:** [July 26, 2023, 2:03am UTC](https://discourse.threejs.org/t/can-you-export-three-js-as-a-component-react/54025 "2023-07-26T02:03:33Z")

</div>

i know components cant have use Effect by themselves so i was wondering how to rephrase this code to be used as a component for the parent app if its possible and what would the parent app look like when rephrased. I’ve …

---

## [Hover functionality with THREE.points and raycaster](https://discourse.threejs.org/t/hover-functionality-with-three-points-and-raycaster/53978)

<div class="topic-metadata">

**Author:** [@anil\_simon](https://discourse.threejs.org/u/anil_simon)\
**Replies:** 3\
**Last updated:** [July 18, 2023, 12:33am UTC](https://discourse.threejs.org/t/hover-functionality-with-three-points-and-raycaster/53978 "2023-07-18T00:33:03Z")

</div>

I am trying to implement a hover functionality over points. This is the code i got from another user. My code has a very similar problem.: Point cloud (forked) - CodeSandbox As you can see, when hovering, sometimes the…

---

## [How to add multiple gltf to scene using for loop](https://discourse.threejs.org/t/how-to-add-multiple-gltf-to-scene-using-for-loop/52235)

<div class="topic-metadata">

**Author:** [@Sue](https://discourse.threejs.org/u/Sue)\
**Replies:** 3\
**Last updated:** [May 31, 2023, 5:30am UTC](https://discourse.threejs.org/t/how-to-add-multiple-gltf-to-scene-using-for-loop/52235 "2023-05-31T05:30:57Z")

</div>

I’m using Three.js and React. I’m trying to display gltf object based on latitude and longitude in locations array of objects. I tried using for loop and access to each latitude and longitude and set position based on th…

---

## [How to import and use three-csm on react?](https://discourse.threejs.org/t/how-to-import-and-use-three-csm-on-react/47080)

<div class="topic-metadata">

**Author:** [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Replies:** 13\
**Last updated:** [January 20, 2023, 11:28am UTC](https://discourse.threejs.org/t/how-to-import-and-use-three-csm-on-react/47080 "2023-01-20T11:28:33Z")

</div>

Hi, I’ve just discover React with three/drei, it’s fantastic !!! But i don’t know how for example use this : three-csm - npm on my react project. How do you insert csm into a jsx function ? Thanks for your reply

---

## [Change the color of multiple meshes on a React Three.js model as the fetching data value and visualize that data on every mesh](https://discourse.threejs.org/t/change-the-color-of-multiple-meshes-on-a-react-three-js-model-as-the-fetching-data-value-and-visualize-that-data-on-every-mesh/40517)

<div class="topic-metadata">

**Author:** [@ksandaru](https://discourse.threejs.org/u/ksandaru)\
**Replies:** 2\
**Last updated:** [December 21, 2022, 6:04pm UTC](https://discourse.threejs.org/t/change-the-color-of-multiple-meshes-on-a-react-three-js-model-as-the-fetching-data-value-and-visualize-that-data-on-every-mesh/40517 "2022-12-21T18:04:23Z")

</div>

Need to visualize a 3d model on a web page and need to control some components called mesh (geo-location tags) on itself separately. fetch the data in MySQL database through Node.js API. As the fetched data changing (Loo…

---

## [Unable to import a glTF file](https://discourse.threejs.org/t/unable-to-import-a-gltf-file/42656)

<div class="topic-metadata">

**Author:** [@delongjs](https://discourse.threejs.org/u/delongjs)\
**Replies:** 2\
**Last updated:** [September 18, 2022, 1:22pm UTC](https://discourse.threejs.org/t/unable-to-import-a-gltf-file/42656 "2022-09-18T13:22:14Z")

</div>

I have downloaded the model(gltf) from here: Oak Cut String Minimalist Staircase - Download Free 3D model by TKstairs.com (@tkstairs) \[608fc2a\] - Sketchfab This is the code I run(/Users/name/Desktop/three-project/exampl…

---

## [Render multiple times GLTF model on a sphere (React)](https://discourse.threejs.org/t/render-multiple-times-gltf-model-on-a-sphere-react/42062)

<div class="topic-metadata">

**Author:** [@GabeHCoud](https://discourse.threejs.org/u/GabeHCoud)\
**Replies:** 0\
**Last updated:** [August 31, 2022, 10:54am UTC](https://discourse.threejs.org/t/render-multiple-times-gltf-model-on-a-sphere-react/42062 "2022-08-31T10:54:05Z")

</div>

Helo ! React and threejs beginner here, I’m working on a personal project and I wan’t to render multiple spheres (acting as planets) with a bunch of chairs on it. A great example is this code, the bouncing ball is irre…

---

## [We're a startup from India building a Metaverse on Three.js using multiple simultaneous avatars from realme player. Looking for people to join the founding team](https://discourse.threejs.org/t/were-a-startup-from-india-building-a-metaverse-on-three-js-using-multiple-simultaneous-avatars-from-realme-player-looking-for-people-to-join-the-founding-team/40009)

<div class="topic-metadata">

**Author:** [@Saswat\_Mishra](https://discourse.threejs.org/u/Saswat_Mishra)\
**Replies:** 2\
**Last updated:** [July 12, 2022, 12:02pm UTC](https://discourse.threejs.org/t/were-a-startup-from-india-building-a-metaverse-on-three-js-using-multiple-simultaneous-avatars-from-realme-player-looking-for-people-to-join-the-founding-team/40009 "2022-07-12T12:02:27Z")

</div>

Please send me an email at saswat@creatospace.com if interested.

---

## [Best way to implement in React](https://discourse.threejs.org/t/best-way-to-implement-in-react/39496)

<div class="topic-metadata">

**Author:** [@DiegoFi](https://discourse.threejs.org/u/DiegoFi)\
**Replies:** 4\
**Last updated:** [June 23, 2022, 6:30pm UTC](https://discourse.threejs.org/t/best-way-to-implement-in-react/39496 "2022-06-23T18:30:18Z")

</div>

Hi everybody! I’m a threejs newbie and I guess this is recurrent topic. In my short experience I tried using the useEffect hook to implement all the code after the \<canvas\> element is rendered functional components. But…

---

## [I add a video textue to a plane and it works well,but when the video finished it didn't paly again,how to loop play a video textue?](https://discourse.threejs.org/t/i-add-a-video-textue-to-a-plane-and-it-works-well-but-when-the-video-finished-it-didnt-paly-again-how-to-loop-play-a-video-textue/39423)

<div class="topic-metadata">

**Author:** [@Gaurav\_Kaushal](https://discourse.threejs.org/u/Gaurav_Kaushal)\
**Replies:** 2\
**Last updated:** [June 20, 2022, 10:29am UTC](https://discourse.threejs.org/t/i-add-a-video-textue-to-a-plane-and-it-works-well-but-when-the-video-finished-it-didnt-paly-again-how-to-loop-play-a-video-textue/39423 "2022-06-20T10:29:23Z")

</div>

\<video id="video" autoPlay muted loop controls webkit-playsinline="true" crossOrigin="anonymous" style={{width:'80%'}}\> \<source src={videoLink} type='video/mp4'/\> \</video\> The vide…

---

## [Unable to show the exact vertex color using bufferGeometry](https://discourse.threejs.org/t/unable-to-show-the-exact-vertex-color-using-buffergeometry/34894)

<div class="topic-metadata">

**Author:** [@karthik-selvam](https://discourse.threejs.org/u/karthik-selvam)\
**Replies:** 6\
**Last updated:** [February 16, 2022, 12:13am UTC](https://discourse.threejs.org/t/unable-to-show-the-exact-vertex-color-using-buffergeometry/34894 "2022-02-16T00:13:03Z")

</div>

I am using bufferGeometry to draw a grid of cells with different colors in a React application. When I set the colors using bufferAttributes, the cells are displayed in a dull light color instead of the specified RGB col…

[Next page](https://discourse.threejs.org/tag/react-three/1193.md?match_all_tags=true&page=1&tags%5B%5D=react-three)
