20,948 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
Advice
2
votes
1
replies
165
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 ...
- 10
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,523
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
116
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
46
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
1
vote
2
answers
138
views
GLSL shader not showing anything in scene in THREE.js - why?
I'm trying to make my own shader for a THREE.js project I'm working on, and I wanted to make a GLSL shader as part of it for one of the meshes in my scene. However, despite writing very basic code for ...
- 69
0
votes
1
answer
60
views
Issue with setThemingColor on groups
We're working with Forge Viewer v7 and trying to color objects based on their ID. The idea is simple: when we provide an ID, the viewer should color the corresponding objects and sub-objects.
We’ve ...
1
vote
1
answer
153
views
Why my code behave differently with transferControlToOffscreen or new OffscreenCanvas?
I’m trying to use a web-worker to render a scene with threejs. I want to render some dynamic font using a CanvasTexture. But I find that when I use canvas in web-worker from ...
- 35
-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
1
vote
0
answers
75
views
ThreeJS doesnt properly render objects those have scale(-1,-1,-1)
ThreeJS render objects reverse lighting those have scale(-1,-1,-1).
Object A has scale(1,1,1)
Object B has scale(-1,-1,-1)
the Model was exported with Sketchup as GLB format.
I tried to manipulate ...
- 1,949
0
votes
0
answers
81
views
Can't display texture of 3d object in three - expo react native
I am trying to load .glb object with texture into scene, and always end up fully white, like its not loaded. I can see texture exists from various .glb viewers, but here it doesn't load inside three ...
0
votes
0
answers
60
views
Why is my shader's linear map range function not smooth?
I am trying to port a Blender shader to WGSL. My plan is to port over every node I need as a WGSL function (unless the node already has an equivalent in WGSL). Currently, I am trying to create an ...
- 23
0
votes
0
answers
42
views
React Native Three - 3d player movement with camera movement simultaneously
How to mimic dual pan responders to be able to work at the same time, like left part of the screen works with movement actions, while right controls camera. I want to be able to change movement and ...
1
vote
1
answer
100
views
Cannon vehicle moving on its own
I'm implementing a 3D truck simulator and I'm facing a problem with the trailer: it moves on its own.
Here are some details and context:
The ground is perfectly flat and horizontal
The wheels have ...
0
votes
1
answer
99
views
svg on canvas with dynamic properties
im trying draw selected svg to canvas but it is very slow, inefficient, bad resolution and not all svg's are working
and i need them svgs on canvas as dynamic(changing color, rotation and scaling)
Is ...
- 37
1
vote
0
answers
35
views
Jolt body warps away when trying to perform intake animation
I’m trying to grab a dynamic body (Object A), disable its physics, and smoothly move and rotate it into a specific holding position relative to another body (Object B). Once it’s in place, I re-enable ...
- 13
1
vote
0
answers
48
views
Issues while exporting image from a rendered scene (Three.js)
I wrote a function (a bit of vibe coding too) that exports the users current canvas as an image.
Reference Images
User’s View:
Please ignore the toolbar in the user’s view image that is not a part of ...
- 36
1
vote
1
answer
124
views
WASD controls on my three JS section not working properly making the screen glitch when moving foward
I am working in react, with a section in three.js where you can move forward with WASD and not the arrow because the arrows affect the scroll, to turn the camera, you have to drag the mouse, I have ...
- 131
0
votes
1
answer
108
views
uncaught TypeError: can't access property "elements", m is undefined in three.core.js while using three-loader-3dtiles library
I'm experiencing a runtime error when using the three-loader-3dtiles library.
"Uncaught TypeError: can't access property 'elements", m is undefined". The error occurs when I try to ...
0
votes
1
answer
78
views
GLB model appears deformed (crushed) in Three.js, but animations and skeleton load correctly
I'm working on a Three.js game using Electron, and I'm running into a strange issue when importing a GLB model exported from Blender.
When I load my model in Three.js, the mesh appears crushed on ...
- 1
0
votes
0
answers
49
views
Make shadows of an object fade as the transparency changes in THREE.js
I have a function that changes the transparency of all meshes (except one specified) in a loaded .glb object using THREE.js; according to the position of the mouse scroll. It all works well except ...
- 1,113
0
votes
0
answers
51
views
Unable to add physics (collision, gravity) in my A-Frame project (Quest + PC via Netlify)
I'm developing an A-Frame (HTML/JS) project for use on Meta Quest 1 and on PC via Netlify to create a simple VR escape game.
I want to add physics (collisions, gravity on objects, impassable walls) ...
- 1
0
votes
0
answers
58
views
Three.js not rendering correctly when canvas has display: none
I'm using MediaPipe to apply face blendshape scores to a 3D avatar's morph targets in Three.js.
The avatar is rendered into a custom canvas element, which is explicitly passed into WebGLRenderer like ...
0
votes
0
answers
42
views
Error “Converting circular structure to JSON” on Custom Postprocessing Effects
I’ve built a custom pixel distortion effect post-processing effect for R3F using @react-three/postprocessing’s . Here’s the gist:
CustomEffect file:
class CustomPixelDistortionEffect extends Effect {
...
- 1
0
votes
0
answers
116
views
Updating HTML element causes PointerLockControls to stutter in three.js
For quite some time, I've had an issue in three.js where when putting any HTML element updates in my animation loop, my PointerLockControls always have a strange stutter. For example:
function animate(...
- 656
-3
votes
1
answer
69
views
REACT charge a lot of images [closed]
Hello so i'm doing an webpage i want to load very high quality images so for te moment the webpage serve the images in like 10s i did a charging srceen for it but it's to long so i made 3 dir for low ...
- 3
0
votes
0
answers
62
views
ThreeJS Selective Bloom is affecting scene background and other meshes (React)
I’m working on a solar system project using React, @react-three/fiber, and @react-three/postprocessing. I’m trying to achieve a selective bloom effect where only the Sun glows, and everything else (...
- 1
0
votes
1
answer
73
views
ThreeJS on-demand rendering intermittently not rerendering
I have a scene that uses CanvasTextures to modify textures on meshes which works well most of the time. Unfortunately after a while on Chrome, the tab can eat up all the memory and cause other tabs to ...
- 929
0
votes
0
answers
45
views
How to apply postprocessing effects (Contrast, Saturation, Exposure) only to a model, not the entire canvas?
I'm working with React Three Fiber and have added postprocessing effects like:
Contrast
Saturation (HueSaturation)
Directional Light
Exposure (via tone mapping or HDR)
Currently, I'm applying these ...
2
votes
0
answers
57
views
Grow Boundary of Object using three.js and ReactJS
ThreeJS is new to me and I'm having the most difficult time growing an SVG's outer boundary. I don't want to simply adjust the width and height, I'm trying to grow only the outer boundary so that I ...
- 21
0
votes
0
answers
51
views
How to add clean trail effect to R3F object component that is a scaled down glb?
I am trying to add a trailing effect to a glb model of Tinkerbell. I have the logic split into four components:
SimpleTrail.jsx which renders the trail effect on a particular target ref (working)
...
- 3
0
votes
0
answers
44
views
Loading DXF models in parallel will throw error
While using loadDocumentNode to load multiple dxf files with 3D format, it will throw errors ash shown in the following figure.
enter image description here
The code is :
const viewable3d = ...
- 1
1
vote
0
answers
39
views
How to load animations one by one in GLTF using three js
I am using glb files and using useGLTF from @react-three/drei
I need to run specific functions in specific animation whenever it is running
the issue is I am getting all the animations at a time and ...
- 31
0
votes
0
answers
70
views
Next.js not tree-shaking package (threejs) and bloating my main js chunk
My project is using the Pages Router (yes I know I should upgrade to using the app router, thats for another day) of Next 14.2.4, React-three-fiber 8.17.7 and three 0.168.0 among other things.
I've ...
0
votes
1
answer
56
views
Open source implications of Three.js and Babylonjs applications
Suppose I build a 3D model in these two open-sources i.e Three.js and Babylonjs, and want to sell that application. I want to clear the following doubts
Do I need to handover the entire code to whom ...
- 1
2
votes
0
answers
127
views
Animate vrm avatar with Three.js
How to make a vrm avatar move according to the json file that contains the coordinates of the mediapipe pose, hands, face.
I know the Hands have 21 landmarks each for left and right, Face Mesh (uses ...
0
votes
2
answers
88
views
How to make a size-fixed sprite with proper scaling in React-fiber-three?
I'm new to R3F and I'm trying to learn some basic fundamentals, basically what I'm trying to do is render a car model from a .glb file and then render a circular button on the door of car which would ...
- 84
0
votes
0
answers
60
views
Three.js shadow anomaly. Appears some dark blur on detail
I'm new in three.js and i don't know how but when i'm using shadows with my model it gives me some anomaly to different details.enter image description here
Like on this image . I have the directional ...
1
vote
1
answer
58
views
Three.js DecalGeometry appears misaligned after moving model or group
'm using DecalGeometry in Three.js to project a logo onto a mesh. It works fine if the model hasn't been moved after loading. But if I translate the model or its parent group (e.g., along the Y axis), ...
- 23
0
votes
1
answer
73
views
Text in the png texture appears blurry when applied to 3d model in threejs preview in windows chrome
I've a 3d model for shot glass(glb), which has a named material for populating textures dynamically from JS.
I traverse through the objects in the scene object and when I find the required node/mesh, ...
