Questions tagged [react-three-drei]
275 questions
1
vote
0 answers
My website has a lot of lag with React Three Fiber
I'm working on a website that for now, only has a text and a floating 3D logo on the right. The thing is, when I'm watching the object, the animation runs at 60fps and the website runs smoothly, but when I'm not watching the object, the website has…
GLPG35
- 125
- 1
- 7
1
vote
0 answers
How to create trails for particles in three.js/react-three-fiber
I'm trying to create particle trails very similar to those depicted in windy.com. Most of my googling attempts led me down the three.js route, and then I found react-three-fiber, which I'm hoping can simplify things, given I'm really not much of a…
John Kealy
- 1,503
- 1
- 13
- 32
1
vote
1 answer
How do I render points on every vertex of my geometry in React with three.js and Three-React-fiber?
I am wondering how to use the pointsmaterial and the points object from three-react-fiber. I have a custom geometry that I import from a .gltf file and I currently render it like this:
Jan Arend
- 284
- 2
- 17
1
vote
1 answer
How to properly (dynamically) change color of a mesh into group?
I have a model:
{e.stopPropagation(); clickHandler(e)}}>
simplesample
- 85
- 8
1
vote
1 answer
How to make smooth camera transition in react three fiber
Till now I have managed to achieve camera shifting from one place to another but it goes all of a sudden i want a animation or a smooth effect in between current and final camera point
function Rig({ children }) {
const outer =…
SHIVANSH SRIVASTAVA
- 11
- 2
1
vote
1 answer
React three fiber: Putting Html text in heads up display
I'm working on a project where I have a minimap in the top left of my react-three-fiber scene. The minimap is a portal into another scene and is fixed to my camera's frame. This means I can move around in a scene and the minimap stays in the top…
zeumer
- 13
- 3
1
vote
1 answer
React Three Fiber OrbitControls Initial zoom wider
I am working on this codesandbox to do practice with React Three Fiber.
My question with the demo is that i do not really understand how i can set the initial zoom way wider in OrbitControls in order that i can see more small stars?
This is the…
Koala7
- 1,340
- 7
- 41
- 83
1
vote
0 answers
CubeCamera as texture for a sphere Geometry => Cube structure way too visible ... React three fiber
I hope this message finds you well
codesandbox : https://codesandbox.io/s/compassionate-goldwasser-yl3sr3?file=/src/App.js
I've been following the last tutorial of Yuri Artiukh on noise…
Alexandre PUJOL
- 121
- 8
1
vote
0 answers
React Three OrbitControls breaks on state Change
I made an application with react, react-three/fiber and react-three/ drei. I'm trying to change a state while orbiting around. Unfortunately as soon as I change any state while orbiting around my OrbitControls is no longer working, except zooming…
tinytree
- 1,009
- 2
- 12
- 28
1
vote
0 answers
@react-three/fiber: RingGeomertry doesn't take the color & shadow
There is something bugging me when using ring geometry. When I attach meshStandardMaterial and specify a color, it always shows as black. I can't use meshBasicMaterial because it's not affected by light. Ring geometry does not react like 3D…
Youssef Lahssini
- 121
- 4
- 11
1
vote
1 answer
How to render the same model already loaded instead of loading it again for every render
I have a component in react that renders a .glb model using useGLTF, let's call it 3DComponent
But the component reloads the model every time a link is performed to it
Is there a way for 3DComponent to use the same model loaded in the previous…
Rafael
- 2,413
- 4
- 32
- 54
1
vote
0 answers
Custom cursor with react three fiber - camera issue
I have a small issue about a custom cursor made in react three fiber.
To track the mouse movement on the viewport and update the position of an element with it is quite easy but it get's trickier once you add camera movements in the equation.
I made…
Alexandre PUJOL
- 121
- 8
1
vote
1 answer
How do you control size of imported SVG's in Three.js?
I am importing an SVG using the SVGLoader and turning each path into a mesh that is then put into a group. When I do so, the group is much larger than I would like it to be. Rather than scaling, I'd like to import it at the correct size to begin…
SteveS
- 21
- 2
1
vote
1 answer
react-three-fiber & drei useTexture hooks error
error: Uncaught R3F hooks can only be used within the Canvas component!
error location: const terrainTexture = useTexutre(url);
error code:
import { OrbitControls, Sky, useTexture } from '@react-three/drei';
import { Canvas } from…
Ban
- 35
- 2
- 7