20,948 questions
1
vote
0
answers
40
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: [...
- 20
Advice
2
votes
1
replies
175
views
what effect and math is behaind animation at antigravity google with Three.js?
How does antigravity.google create its background animation effect using Three.js, and how can I reproduce something similar (likely using math-based animations)?
I'm trying to understand how the ...
- 14.1k
0
votes
0
answers
31
views
why 'this' is undefined inside WebGLRenderer().setAnimationLoop() [duplicate]
I am new in threejs and initializing scene, render and everything inside a class.
I have a method animate and in the constructor, I am doing this: this.renderer.setAnimationLoop(this.animate)
inside ...
- 20
0
votes
0
answers
52
views
I can't move from panorama image to next one inside immersive web experience
Inside the VR mode, I can move from image to another I use my own fetching API.
I tried to move to the next panorama, but it is not moving inside the scene. I was trying multiple solutions, nothing ...
3
votes
1
answer
101
views
Extruding a path without the z command in Three.js
I am trying to extrude this path using Three.js ('M10,10h100v100'). You'll note there isn’t any 'z' command in the SVG file, and it is just meant to be a polyline, going right 100 and then down 100.
...
- 1,521
Advice
0
votes
0
replies
60
views
Webgl Threejs canvas performance optimization
Hi guys i am trying to make a website with 3d model in it and you can apply patterns designs texts stickers on the model i am doing it with canvas atlas which is every assets renders inside the oen ...
- 37
2
votes
0
answers
68
views
Keep getting error "THREE.WebGLRenderer: Context Lost" in my React Three Fiber Project
I'm making a school project for the scale of different planets and for now im making an MVP for the app.
I get no error when I remove the Slider component but when it is there it reports the error. ...
- 21
0
votes
0
answers
118
views
React Three.js: "Error creating WebGL context" even though WebGL works on https://get.webgl.org/
I'm developing a hero section for my React portfolio that includes a 3D model rendered with Three.js via @react-three/fiber.
However, when the component loads, I see this error in the browser console:
...
0
votes
0
answers
47
views
WebXR controllers for positioning in three.js
In Three.js VR I retrieve references to the controllers like the code below. There are two ways to get controller objects for 2 different purposes, buttons and positions/rotations.
controller1 is for ...
- 14.2k
4
votes
1
answer
70
views
i uploaded a 3d model file in cloudinary and want to fetch it but when i doi it, it says: it "cannot read property 'match' of undefined"
i want to show on the screen the 3d model when i import it from cloudinary and it is succesful but the problem is that it wontshow the 3d model on the screen and the error says failed to load GLF ...
1
vote
0
answers
95
views
How to create a looping deforming Text animation
I'm trying to create an SVG animation where a shape continuously deforms (like a breathing or liquid blob).
The goal is to later place text inside the shape so that the text appears to deform along ...
- 125
0
votes
1
answer
37
views
How to get face/head direction/rotation from BVH files - Axis Studio?
I'm trying to get the direction/rotation of the head or the direction/rotation of the face from the neck.
I'm working whit a BHV file exported from Axis Studio:
Body: Axis Studio
Euler Order: XYZ
...
- 94
1
vote
0
answers
121
views
three.js: How do I wait for the <canvas> image to update for each render?
Calling renderer.render() in a requestAnimationFrame() loop will often fire faster than the <canvas> element can update its image, making any "true" FPS measurement inaccurate.
In ...
- 3,968
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
vote
0
answers
84
views
Three.js - DOF not working with point clouds (THREE.Points)
I'm trying to implement a Depth of Field (DOF) effect in a Three.js scene that includes a point cloud rendered using THREE.Points. I've based my implementation on these official examples:
https://...
- 11