Questions about React-three-fiber, a React renderer for Three.js.
Questions tagged [react-three-fiber]
981 questions
18
votes
5 answers
TS Expression produces a union type that is too complex to represent with Material-UI and @react-three/fiber
I create a Next.js application that use Material-UI and @react-three/fiber library.
I recently pass Material-UI to V5 and a error is appear.
Here is the error:
I search everything to remove it but I found nothing.
So I try to create a new project…
Melvynx
- 912
- 1
- 6
- 20
11
votes
3 answers
react-three fiber shows: "Uncaught Div is not part of the THREE namespace! Did you forget to extend?"
i have been trying to add a scroll area to my the app i was building but i just keep getting this error:
Uncaught Div is not part of the THREE namespace! Did you forget to extend?
I'm very new to three.js and it is even more compicated because i…
Jeoffrey Duke
- 143
- 1
- 11
10
votes
2 answers
Three-fiber canvas size
I have a question regarding the three-fiber canvas size. I need a fixed canvas width and height. Unfortunately I have not found out how to change the canvas width and height. Even though I can change the sizes with style={{width: 100px, height:…
Thomas G.
- 101
- 1
- 1
- 4
8
votes
5 answers
The React Three Fiber mesh tag is unrecognized in this browser
I am following a 3d portfolio tutorial from Youtube and got caught in this error. Here I am trying to render a mesh but the console is showing a warning that "This element is unrecognized in this browser". The browser is rendering the rest but this…
Aryansh Tripathi
- 85
- 1
- 5
7
votes
3 answers
Use the same GLTF model twice in react-three-fiber/drei/Three.js
In this minimal react-three-fiber App I am trying to load and include the same GLTF model twice:
import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { useGLTF } from "@react-three/drei";
function MyContent()…
Giraphi
- 1,383
- 1
- 11
- 26
7
votes
3 answers
Color differences between threejs + vanilla js and react-three-fiber + create-react-app
This has been bugging me for a while. Why the material colors in react-three-fiber appears to be dull than in threejs
Objects and their properties are same in both implementations.
threejs version is same.
Implemented in freshly…
devAhsan
- 223
- 2
- 10
7
votes
2 answers
How to extract and play animation in react-three-fiber
Well I have .gltf animated model. I was successful in loading the model but wasn't able to play the embedded animation. I would like to know if in any way one can resolve it. Btw I am working this in react. Thank you in advance.
Here you can find…
Avinash
- 81
- 1
- 3
6
votes
2 answers
How to display a million of interactive line strings in Three.js
I would like to display a circuit using react-three-fiber (or with the Drei library).
A circuit is composed of segments and turns.
A segment is defined thanks to two points.
A turn is defined thanks to a list of points.
I'd like my user to be…
TheKalashnikov
- 317
- 2
- 8
6
votes
2 answers
Using lookAt in @react-three/fiber
I am trying learn how to use three js with react.For this purpose I am using @react-three/fiber and @react-three/drei.
This project by chriscourses was what I used to learn three js and I hope to use it to learn using threejs with react.
The below…
Muljayan
- 3,588
- 10
- 30
- 54
6
votes
2 answers
@react-three/fiber: How do I create a helper for a shadow camera?
So i'm used to setting helpers like this:
useHelper(sLightRef, THREE.SpotLightHelper);
return
Andrew Young
- 684
- 1
- 13
- 23
6
votes
1 answer
Animating bufferAttribute with react-three-fiber and react-spring
I have simple Points mesh with custom shader and buffer geometry.
The geometry has position, size and color attributes.
On pointer hover, the hovered vertex turns into red color.
So far so good.
Now I would like to animate the change of color of the…
mtx
- 1,196
- 2
- 17
- 41
5
votes
0 answers
Multiple scenes in VR mode and different cameras
I'm trying to implement this fiddle in an XR environment.
In the fiddle, the second scene is fixed to the screen, but not with the oculus/player camera...
Does anyone have a solution to making a scene or an object always on the top right corner of…
BENARD Patrick
- 30,363
- 16
- 99
- 105
5
votes
1 answer
How to rotate entire canvas in react js with react-three-fiber?
I followed this codrops tutorial on how to make a scrollable site using react-three-fiber.
I changed it up quite a bit and centered all the items as well as removed the RGB split effect. Now I would like to rotate the entire scrollarea/canvas in…
Lalaland124
- 81
- 9
5
votes
0 answers
useConvexPolyhedron collision on react-three/cannon clipping through object
I am having issues trying to make collision work properly with an imported glb file only used for collision.
There are two parts to this question:
I am currently getting a whole lot of faceNormal errors and vertices warnings in the…
szr1ght
- 51
- 1
5
votes
0 answers
Unable to load textures using remote url in react-three/drei/native
I'm trying to load an image texture using useTexture and apply it to a meshStandardMaterial in my react-native app. The texturing works fine when I import the image from local assets folder. But, when I change the image to a remote URL, the…
KBhokray
- 117
- 1
- 10