14 questions
0
votes
0
answers
21
views
React-three-fiber: Cannot convert undefined or null to object (useRef)
I’m running into a strange issue with react-three-fiber that only shows up in development, but not after deploying to Vercel.
Here’s my setup:
<Canvas gl={{ antialias: true }} camera={{ position: [...
- 10
0
votes
0
answers
31
views
Camera framing problem in R3F (CameraControls + different object aspect ratios +Screens with different sizes)
I’m building a 3D website in React Three Fiber, Three.js, and @react-three/drei.
The scene is a 3d circular monument with 4 wall-mounted objects spread evenly around the monument: Mirror, ATM, Statue, ...
- 141
-1
votes
1
answer
77
views
How to use gltfjsx to create a jsx file to load a glb file but change material colors from each call to the transformed file/model?
The best example is this sandbox
https://codesandbox.io/p/sandbox/re-using-gltfs-forked-nl2mm9?file=%2Fsrc%2FApp.js%3A18%2C1
It loads a glb model within a function that allows the properties to be ...
- 581
0
votes
0
answers
32
views
Integrating local Vite r3f on Webflow, shows Error: Unexpected identifier 'RefreshRuntime'. Expected a ';' following a targeted import declaration
' these are the dependencies I added:
"dependencies": {
"@react-three/drei": "^9.51.24",
"@react-three/fiber": "^8.10.0",
"@types/...
- 1
0
votes
0
answers
56
views
Implementing Drag-and-Drop Window Positioning on a Wall Using React Three.js
I am planning to create a window on a wall.
The position of the window can be controlled using drag and drop.
The window should not be draggable beyond the boundaries of the wall (e.g., when the ...
0
votes
1
answer
139
views
(R3F/React-three-fiber/Ecctrl) gltfpack with gltfjsx - my packed .glb model is not loading
code sandbox link here
I'm using ecctrl and react-three-fiber.
My character model isn't loading and I don't know how to debug it? Any ideas?
I used something like `gltfpack -i ./inputfile.glb -o ./...
- 2,420
0
votes
0
answers
79
views
Locomotive-scroll don't work in my code in R3F
Locomotive scroll doesn't work in my code. When I click on a 3D element it displays a modal with text and I'd like to add scrolling effects with locomotive, I don't get console errors but scrolling is ...
- 1
1
vote
1
answer
3k
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 ...
- 33
0
votes
2
answers
1k
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 ...
- 481
-1
votes
1
answer
103
views
Converting 3ds/obj/fbx 3d model to glb
Im trying to implement a 3d baseball stadium model to my next.js project using three.js/r3f.
The problem is that the model i need only supports fbx, 3ds, obj format, and as far as i know, to implement ...
- 1
1
vote
0
answers
37
views
Fix skewed image when camera is rotated in three.js (R3F)
Here is a code snippet of what I have done so far
const Sphere = () => {
// url is an panoramic image of type .png, jpeg, webp, or jpg.
const texture = useLoader(THREE.TextureLoader, url);
...
- 101
0
votes
1
answer
330
views
R3F Decal with specific shapes
I want to be able to change the shape of Decal mesh such that the image appears cropped according to the given shape. My attempt was to make it a triangle.
const Image = ({ position, image, scale, ...
0
votes
0
answers
106
views
shortest path between two points(mesh) in the glb file in three.js using React.js
I've a .glb file which is about to showcase the map. I need to find the shortest path between two points(mesh) and draw a line using Yuka . The solution should be in React.Js or R3F. Also camera ...
- 9
0
votes
1
answer
286
views
Building layout of the warehouse using react three fiber, while building 1/10 project it started freezing
I am trying to create 3D layout of the warehouse but even I build little part of the project it started freezing in first person movemenent . So I am wonder is that possible to create such a project ...
- 5