Questions tagged [react-three-drei]
For questions about "react-three-drei", a set of helpers and abstractions for "react-three-fiber". It may be helpful to also include "react-three-fiber" when asking questions about "react-three-drei"
react-three-drei
367
questions
-1
votes
0
answers
37
views
Some of three object are crashing
I'm using react three/drei library to render some 3d objects in my website , on desktop they're all rendering correctly but in mobile some of them are crashing and not displayed properly , i asked ...
- 1
0
votes
1
answer
36
views
How to make orbit controls' center something other than the center of the canvas?
I want to rotate an object or the camera around the center of an object, however the object is not placed in the center of the canvas, a little to the left. So using OrbitControls is making the object ...
0
votes
0
answers
23
views
The scroller delays (or lags) when using react-three/fiber and framer-motion
I'm trying to combine three.js content by react-three/fiber and framer-motion.
The problem is that when I use framer-motion to pin the canvas to the top, I notice a delay gap between my HTML content ...
- 13
0
votes
1
answer
32
views
How to enable camera scroll and disable zoom using camera controls drei
I use CameraControls of Drei Three JS to controls the transition. I already create useEffect to update the zoom, scroll, and rotate of the CameraControls but the zoom and rotate event still enable. ...
- 199
0
votes
0
answers
12
views
Texture on GLTF model is duplicated in Three.js. How to render texture without duplication?
I am attaching a picture below.
I have a React app with a GLTF model in it. I can put a texture on this model, but for whatever reason, this texture (Starbucks logo) is duplicated. I don't want it to ...
0
votes
0
answers
51
views
How to apply a minecraft skin texture to my model and add the outer layer to the model?
I want to add minecraft skin model to my website using three.js:
I'm using next.js, so to interact with three.js I use @react-three/fiber and @react-three/drei.
I just started learning three.js and ...
- 29
0
votes
0
answers
24
views
Scroll looks harsh in static site Hero section with framer-motion scroll animations
In a personal site I have a Hero section with a couple images set to produce a parallax effect and a 3D model. The desired behavior is for the 3d model to animate before the parallax effect is ...
- 1
1
vote
0
answers
40
views
How to Change the Initial Perspective of CameraControls?
I've written a React component where I'm trying to change the initial perspective of CameraControls, but I haven't been successful. Does anyone have any ideas?
The code to change the position of the ...
- 100
-1
votes
0
answers
16
views
How to Rotate Camera Around a 3D Map in React Three Fiber Without Moving Too Far From the Map (not in a circular path)
I am working on a 3D map using React Three Fiber, and I have implemented auto-rotation using OrbitControls. However, the camera rotates in a perfect circle, causing parts of the map to appear far away ...
-1
votes
0
answers
19
views
Environment from @react-three/drei triggering a rerender
I have a scene like this
<Canvas className="App"
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
...
- 11
0
votes
0
answers
16
views
Error when integrating Spline3D Model into React Three Fiber
I made a model using Spline3D, and downloaded the react-three/fiber code directly from the site. When I integrate it into my React website, I'm getting the following errors:
ReferenceError: Can't ...
0
votes
1
answer
416
views
Why does the error While resolving: [email protected] occur while installing react-three-fiber in react-native?
I am trying to use react-three-fiber in react-native. When I try to install and run it according to the manual, the following error occurs.
When I run npm install, the following error occurs. Can you ...
- 11
0
votes
0
answers
26
views
Add MorphTargets in the gltf file
I am searching for realistic Avatar 3D models for lipsync I found the models but in that model, there are no MorphTargets so I'm not able to do lipsync with that avatar. Manually I want to add it Can ...
0
votes
0
answers
27
views
Three.js outlinePass add-on not working when implemented with R3F
I'm having a hard time using the R3F -postprocessing library so I decided to use raw threejs classes:
By diving into the R3F extending third party library tutorials I managed to setup the renderPass ...
- 257
0
votes
1
answer
45
views
React three fiber - setting up postprocessing using effectComposer and Passes (OutlinePass) from three.js addons
I'm having a hard time using the R3F -postprocessing library so I decided to use raw threejs classes:
By diving into the R3F extending third party library tutorials I managed to setup the renderPass ...
- 257