Questions about React-three-fiber, a React renderer for Three.js.
Questions tagged [react-three-fiber]
981 questions
0
votes
1 answer
"vector.project" to the Normalized Screen Position of the Camera? (react-three-fiber)
Please help me find the normalized screen position forEach Vector3 of my 3D model. I attempted to use the "vector.project(camera)" method to save the projected screen vectors separately, but it doesn't seem to work. I'm using these vectors for…
user14440113
0
votes
0 answers
React-three-fiber Raycasting
I am attempting to use a raycast from the camera's position to detect collisions with a 3d model. But I'm not sure how to cast the ray within a Canvas, or how to detect collisions with a components 3d model.
Heres my code: code
I'm trying to hide…
user14440113
0
votes
1 answer
Struggling with React Three Fiber Components
I have a json filled with product-infos, path to the fbx-files, etc. Now I want to build a dynamic component, based on my json file, which loads my fbx-files onto my canvas. I later want to reference the objects, group these and animate them.
This…
tinytree
- 1,009
- 2
- 12
- 28
0
votes
1 answer
Create three.js components with map method
I've created a react-three-fiber functional component to load a glb file of a butterfly with animation and I am returning a primitive with the scene of the glb passed as an object prop. It is nested in a mesh, that is nested in a scene, that is…
Trent
- 1
- 1
0
votes
1 answer
React Three.js .GLTF Baked-In Texture Not Appearing On Model
I have a simple scene including a sphere model with a moon diffuse and bump texture baked into a ".GLTF File." I imported the model with GLTFJSX, but only the model appears. I turned the lighting up, but that didn't seem to solve the issue. I put…
user14440113
0
votes
2 answers
Adding a GLTF Model Into a Simple React Three Fiber Scene
I'm simply trying to add a model with a diffuse and bump texture to a simple scene in react 3 fiber.
I have literally no clue what I'm doing wrong.
Heres the sandbox:…
user14440113
0
votes
2 answers
Calling geometry methods in react-three-fiber
How to call methods like .rotateZ (doesn't work out of the box) or .center (which accept no args) on geometry component.
devAhsan
- 223
- 2
- 10
0
votes
1 answer
react-three-fiber 3D object (.obj) model not casting any shadow
I'm currently new and learning about three.js. And i'm using react-three-fiber to make it happen with React, but i stumbled upon a problem. It cannot cast a shadow to the model whatsoever. I've tried to use obj.castShadow = true on the parent and…
Lovelycroissant
- 13
- 5
0
votes
1 answer
Disable effect via props react-three-fiber
I have scene created with react-three-fiber which has an EffectsComposer with a Glitch effect using react-postprocessing npm package.
I would like to toggle the active state of the Glitch effect using an html input checkbox, however, toggling the…
fitzmode
- 1,007
- 1
- 18
- 29
0
votes
0 answers
On a high level, how would I render a bunch of meshes in react-three-fiber, all of which need to know their position at all times?
Essentially I need a few dozens (basic) meshes moving around the screen at once, and they all have to know their position at all times. The method I've tried slows down at around 10 or so meshes, and is remarkably slow by 30. On a high level, how…
ryanjackson
- 53
- 5
0
votes
1 answer
react-three-fiber: Rotate tetrahedron "face down"
I'm trying to rotate tetrahedrons so that they lie with one side facing downwards, like how they would be if they where physical objects that you placed on a floor.
I expected this SO answer to solve my problem
After applying the accepted answer by…
hellogoodnight
- 1,989
- 7
- 29
- 57
0
votes
1 answer
Canvas not capturing mouse position when hovered over an on top of it
I'm using React Three Fiber to animate a 3d model looking at the mouse. This is creating a canvas element in the background of my page. I have a few divs and h1s layered on top of it, and whenever my mouse hovers over the divs/h1s, the canvas…
charlieyin
- 371
- 6
- 16
0
votes
1 answer
Position sprite at bottom center of orthographic camera
I'm trying to position sprites at the bottom center of the orthographic camera.
This is what I have currently -
The object:
function Obj() {
const texture = useLoader(THREE.TextureLoader, loadedimg);
const spriteRef = useRef();
return (
…
user8108382
0
votes
1 answer
Animating elements with react-spring usesprings hook
Trying to animate a bunch of objects to their positions, and useSpring works for me (for single element), but useSprings is not for 3 objects.
Here is demo (mousedown red…
Yurii Artyukh
- 33
- 5
0
votes
1 answer
Three.js and React-three-fiber model is completely black?
This model seems to load completely black - but others do not. https://d1iczm3wxxz9zd.cloudfront.net/e4a5c9ee-9fa0-46b2-9ff5-8e52e6286a3b/5ee3baf2-2524-4617-99a7-2a91b4bd20c1/11/ITEM_PREVIEW1.glb
Anyone happen to know why?
Other GLB files have no…
Zach
- 468
- 9
- 17