Position a 3D model with a fixed canvas that isn't 100vh x 100vw?

So I noticed we can change the canvas size in the 3D model element. It seems anything but equal sizes vh and vw will lead to stretching of the model inside. Is there a way to have a canvas that has a fixed dimension or a clamp so I can position the 3D model more freely with CSS instead of within the canvas?

I find the camera’s and model’s positioning are directly related to what’s inside the canvas and not the canvas itself, so it’s very challenging to get elements inside to stay centered.

Ideally, I’d like to have a container that’s like fixed widths with the 3D model inside it, retaining its aspect ratio.

Answered on FB but in case anybody here runs into it and also cause pasting code on FB sucks, here a copy pasta version :wink:

There kinda is a magic formula for the camera but it’s not currently possible to use it as is (I think). We need to access the camera to update some values based on our canvas size. So first thing is to find our cameras name by doing

console.log(bricksforgeData.cameras)

Then we create an event which fires on pageload with a delay of 500ms. In that event we add a JS snippet containing the following:

const canvasWidth = document.querySelector('canvas').offsetWidth;
const canvasHeight = document.querySelector('canvas').offsetHeight;
let camera = bricksforgeData.cameras.sikuuj;

camera.fov = canvasHeight / canvasWidth;
camera.aspect = canvasWidth / canvasHeight;
camera.updateProjectionMatrix();

Only thing left to do now is play with the scale of our model in the native BF UI. I’m sure there is a way to tell the camera to always show the model in it’s entirety but haven’t played around with that yet.

My 2 results with different canvas sizes set via the regular UI:

1 Like