Questions tagged [react-three-drei]
275 questions
2
votes
0 answers
How to load my 3d object not come from public folder?
I would like to know if there's a way that I can load my 3d object (.glb) that will be uploaded to my AWS server then I will going to get the endpoint. I tried but there was an error saying "THREE.WebGLRenderer: Context Lost"
The file path of this…

user18528865
- 65
- 5
2
votes
0 answers
Environment are not probably rendering when there's a model in three-drei
thats how i render my environment
const Three = () => {
return (
<>
…

Mark Wasfy
- 167
- 1
- 13
2
votes
1 answer
How to install a react-three/fiber and react-three/drei version compatible with "react": "^17.0.2"?
I having trouble with the installation of react-three/fiber and react-three/drei. Please tell me how to install a downgrade version of the two packages. I can't change the version of my react and react-dom because some packages might be affected by…

user18528865
- 65
- 5
2
votes
0 answers
React Three Fiber ShaderMaterial animation problem
I've been trying to find where I made a mistake maybe 30 times, but I couldn't find it. There is no problem in the view, but the animation does not work in the Component.
The view works well, but the animation needs to work in the code I wrote in…

Vehin Velat Eker
- 31
- 2
2
votes
1 answer
React Three Drei can't resolve react-dom/client 17.0.1
three version:^0.140.2
@react-three/fiber version:^8.0.19
@react-three/drei version:^9.11.0
node version:14.18.13
npm (or yarn) version: 1.22.17 (yarn)
react version:17.0.1
react-dom version:17.0.1
Problem description:
Implementing react three…

Yues Hafiyan
- 97
- 1
- 7
2
votes
1 answer
R3F OrbitControls with fixed camera position
I'm using this for a 360 image and I need the camera to stay fixed at (0,0,0)
If I update the camera position the controls stop working.
I've seen this post https://codeworkshop.dev/blog/2020-04-03-adding-orbit-controls-to-react-three-fiber/ which…

beek
- 3,522
- 8
- 33
- 86
2
votes
2 answers
Shadows in React-Three-Fiber working but cropped in rectangular region for no reason
Hi my problem is the following:
I successfully added shadows to my viewport but those seemed to be cropped inside a certain region. Thank you for your help :-)
with crop
region
2
votes
1 answer
React-three-fiber points not rendering
I am starting to learn React-three-fiber and was triying to render some points in the canvas. I have found some code on internet but it does not seems to render those points in the canvas.
There are no errors in console.
I attach the code I am…
2
votes
2 answers
How do I properly use drei useGLTF
I think I'm following the react-three docs and many other examples, but cannot get drei useGLTF to work as others have.
I have a simple, from-scratch, Next|React|react-three/fiber project. I'm simply trying to load the example astronaut and display…

Bill O
- 315
- 4
- 13
2
votes
0 answers
React state update during control change breaks OrbitControls from three
I am using react three with drei orbitControls and try to detect wether the camera is above or below zero, while moving the camera around. Currently I'm using onEnd listener to trigger my code in my ParentComponent. If I change a state of my parent…

tinytree
- 1,009
- 2
- 12
- 28
1
vote
0 answers
React Three Drei Environment doesn't seem to allow adjusting of intensity
I have been playing a bunch with the Environment component and I've decided instead of using images I would just use colors to set the mood and theme I need. I originally tried using Ambient lights which worked fine but I import models from Blender…

Xavier
- 11
- 4
1
vote
1 answer
Problem displaying 2d image on 3d surface
I am working on a code tutorial from youtube and I have run into an issue where I have 13 icosohedronGeometry balls successfully rendered to my screen. However the 2d images the video has me displaying on the balls are not visible. I have no errors…

Rabbie Wordie
- 11
- 1
1
vote
0 answers
Instanced object isn't changing color
I have around 20k objects instanced like this:

Ivan Sedelkin
- 11
- 1
1
vote
0 answers
How do I make the ScrollControls to activate scrolling only when the first page of the website is fully scrolled down?
In my website I have included a landing page and then a ScrollControls of React-three-drei component. So when I am halfway down from my landing page to the second page i.e: the ScrollControl component ,and when I move the cursor to that component…

Ritik Kumar
- 19
- 1
1
vote
0 answers
R3F / ThreeJs :How can shadows be precomputed in Three.js?
I am creating a website where users should be able to create worlds in a world editor (also coded in R3F/ThreeJs).
What I would like to achieve is that when users create the world, it bakes the shadows and then displays a visually appealing version…

delorme victor
- 11
- 2