Hello everyone,
I hope someone can help me with an issue I’m having while working with Three.js and a GLB model.
Background:
I’m working with a 3D model that I created in Blender. The dimensions of the model in Blender are as follows:
- Width (X): 8
- Height (Y): 6.5
- Depth (Z): 10
Everything looks perfect in Blender, and the bounding box aligns with the model dimensions. However, when I load the exact same GLB file in Three.js, I get an unexpectedly large depth on the Z-axis for the bounding box:
- Width: 8
- Height: 6.5
- Depth: 200 (instead of the expected 10)
What I’ve Tried So Far:
- Scaling: The model’s scale is set to (1, 1, 1), and I attempted to adjust the depth with
model.scale.set(1, 1, 0.05);
, but this distorts the entire model. - Bounding Box Check: In Three.js, I used
computeBoundingBox()
to calculate the bounding box for each mesh node in the model, but the model still shows the incorrect depth. - Rotation and Axis Adjustment: I rotated the model 180 degrees in Three.js (
model.rotateY(Math.PI);
) and reset the rotation to zero to ensure this wasn’t affecting the depth. - Console Debugging: I printed all meshes and their bounding boxes in the console. No individual mesh appears to have a depth of 200, but the overall model bounding box still has this large depth.
Export Settings in Blender:
I’m using the GLB export with the following settings:
- Apply Modifiers
- +Y Up (since Three.js uses Y-up)
Question:
Why might Three.js be reading the model depth as much larger than it is? I can’t see any hidden geometry in Blender, and I’ve re-exported the model after applying all transformations (Ctrl + A → Apply All Transforms). Does anyone have any ideas about what might be causing this or what I might have overlooked?
I’d appreciate any tips or suggestions!
Thank you in advance!