Questions about React-three-fiber, a React renderer for Three.js.
Questions tagged [react-three-fiber]
981 questions
5
votes
1 answer
THREE.FontLoader() doesn't work in Three JS
I'm new in Three JS and I would like to create a 3D text. I followed most of the tuto to create it, but I have an error even if I follow all the steps or copy/past the tuto's code.
This is my component :
import * as THREE from "three";
import bumped…
ti3uxx
- 53
- 1
- 4
5
votes
1 answer
TypeError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object or function
We're currently working on a project with Next.js and Three.js (react-three-fiber). After clearing the cache in the browser, the 3d model was not shown anymore.
We get some errors. Actually one warning an one error (multiple times).
The error…
Robin Aegerter
- 457
- 3
- 16
5
votes
0 answers
How to render multiple scenes without using multiple threejs contexts
I've seen this tutorial on how to use only one threejs context and renderer to display objects on multiple canvases, is there any way to migrate the result to react-three-fiber. There is an exemple of multi scene on github but it's not what I…
Naoufel BERRADA
- 83
- 1
- 7
5
votes
1 answer
WARNING: Multiple instances of Three.js being imported
I'm getting the following warning when trying to use @react-three/fiber and @react-three/drei in the same project.
Steps to reproduce
npx create-react-app reproduced-warning
cd reproduced-warning
npm install three @react-three/fiber…
sxkx
- 512
- 5
- 13
5
votes
2 answers
Issue importing react-three-fiber and react-three/drei
I'm importing react-three-fiber and react-three/drei in my app.js, but when I start my app it gives me this error:
./node_modules/@react-three/drei/core/Billboard.js
Module not found: Can't resolve '@react-three/fiber' in…
Gabriele Sabatino
- 136
- 1
- 8
5
votes
2 answers
React-three-fiber hooks can only be used within the Canvas component
I have these two components:
Camera.tsx
import { useGLTF } from "@react-three/drei"
export default function Camera() {
const gltf = useGLTF('/scene.gltf', true)
return (
)
}
And using it…
Saqo Melqon
- 93
- 1
- 1
- 6
5
votes
3 answers
How to Set-up Raycasting in React-three-fiber
I am trying to set up a scene in react-three-fiber that uses a raycaster to detect if an object intersects it.
My Scene: scene
I have been looking at examples like this example and this other example, of raycasters that use simple three objects but…
user14440113
4
votes
1 answer
Loading .glb file to React native expo app
I am working on a project where I would need to display 3d avatars in react native. When adding my .glb model using GLTFLoader imported from three/examples/jsm/loaders/GLTFLoader, I received a FileReader.readAsArrayBuffer is not implemented…
caslawter
- 631
- 1
- 6
- 11
4
votes
1 answer
Unable to figure out how to highlight or select individual objects in InstancedMesh and display custom HTML tooltip using react three fiber
I have been trying to get a 3D scatter plot to display using InstancedMesh of three.js via a React app (therefore using react three fiber).
After a few days I was able to get the 3D scatter plot of spheres and also color them. However I want to be…
jar
- 2,646
- 1
- 22
- 47
4
votes
1 answer
How to properly configure Suspense position into Canvas?
How to properly set position of a 3d model into Canvas regarding to x,y,z axes?
…
middleStackoverflower
- 162
- 7
4
votes
0 answers
How do I implement this very common AR scenario in react-three/xr
I'm trying to implement an iconic AR user scenario using react-three/xr. A typical scenario is:
the user clicks a button to enter AR mode.
the 3D model is automatically placed on a plane in front of the AR device, usually a floor but sometimes a…
Bill O
- 315
- 4
- 13
4
votes
1 answer
How to add a jsx component inside a react-three-fiber canvas?
I would like to insert a jsx component inside a react-three-fiber canvas. Is there a way to do it?
I've forked an official exemple, that features an infinite scroll. Each element is an image from @react-three/drei. Let's imagine I have an array of…
DoneDeal0
- 5,273
- 13
- 55
- 114
4
votes
1 answer
How to understand "useBox" in react-three-fiber
I'm interested in learning how to create dynamic objects and group them together entirely in react/JavaScript. I'm looking at the chair and table in this example as my model:
https://codesandbox.io/s/ragdoll-physics-forked-bntr9
At this point, I'm…
NealWalters
- 17,197
- 42
- 141
- 251
4
votes
1 answer
Get Renderer Info using React Three Fiber
I'm looking for a way to call renderer.info using r3f. ThreeJS Doc - WebGLRenderer
As this is an older project I'm still using the class component here to call the render method.
return (
tinytree
- 1,009
- 2
- 12
- 28
4
votes
2 answers
React three fiber add texture to obj model
In my app I want to add texture to the loaded .obj model. I have the same situation with my .fbx loaded models. Below is my example code, but this works only with something like sphereGeometry not with a loaded model.
Thanks in Advance!
import {…
Kamil Kozicki
- 71
- 1
- 3