Orthographic camera view is warped, compared to Blender original

In Blender, my Orthographic camera is set up like so:
16%20PM

Somewhere in the export/load process, that view becomes this:
35%20PM

(Ignore the difference in material, I’m worried about the camera view)
I can manually change camera.top and camera.bottom in three.js
to get the view approximately corrected, but this isn’t ideal. How can I fix this the right way?
I’ve attached my blender file and the exported .glb file.

warped.zip (166.7 KB)

What do you mean it’s warped? It looks like a regular orthographic view. Are you sure it’s not an issue with the axes? Three.js uses a Y-up world, but Blender uses a Z-up, which can lead to lots of confusion… is that what you’re referring to?

See the rectangles on the left edge of the screen?

In Blender they are tall and slim, and touch the top and bottom edges of the frame.

In what should be the identical shot, Three.js renders them shorter, wider, and pretty far away from the top and bottom edges. That same “warping” is visible on the iMac mesh, though it’s harder to tell.

As to the Y-up issue, I’m not sure – I’d imagine an axis transformation problem would leave the view flipped upside down, or something similar?

The camera in that model specifies top/bottom/left/right planes in world units — if you resize the (browser) window you can pretty arbitrarily stretch it because the aspect ratio of the window doesn’t match what the camera uses. If you want to render in threejs with a different aspect ratio than you had in Blender, you’ll need to change either the top/bottom or the left/right planes to match the actual window aspect ratio, after loading the model.

The way to do that is to compute the aspect ratio the camera specifies, compute the aspect ratio of the actual window, then scale either the top/bottom or left/right planes of the camera to match that.

2 Likes

Check your aspect ratio settings under render!.
In the right window pane click on the camera icon…
scroll down and there should be an x and y field for aspect ratio.
Set these both to one.
Its annoying the way the default setting squashes objects like that