Scale FBX object 100% height canvas

Questions
, , ,
1

Hi, I’m trying to create a website with some 3D models of World of Warcraft
I’ve my FBX models, they’re already rendered and animated
But they’ve differents sizes …
How can I adjust my PerspectiveCamera ?
I want my model to be 100% height of my canvas …

Here is my camera :

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

And here is my fbx :

var loader = new THREE.FBXLoader(manager);
loader.load('models/fbx/ragna_fbx/ragna.fbx', function (object) {

   object.mixer = new THREE.AnimationMixer(object);
   mixers.push(object.mixer);

   var action = object.mixer.clipAction(object.animations[0]);
   action.play();

   scene.add(object);

}, onProgress, onError);

I’m trying to find a formula to scale my fbx … Without success

This is the actual rendering
unknown

And I want something like that …
unknown-1

2

You can use this Functions to calculate the visible width / height at a given z-depth from a perspective camera

Use the bounding sphere diameter.

1 Like
3

Thank, it fix the camera problem, but my model is still too big …
I need to unzoom manually to see it correctly … And for others models I need to zoom …
There is not option to fit the model’s scale to the canvas width/height ?

4

No, but you can use the function to calculate the distance so it fits. Maybe using a naive approach could suffice your needs, like use the bounding sphere radius multiplied with like 4, use this distance, or calculate it with the function and then just:

camera.position.set(distance, distance, distance);
camera.lookAt(myModel.geometry.boundingSphere.center);

If your model is composed of submeshes you would need to caluclate the center and the max radius though by traversing all childs, but since they are characters i don’t think you need it.

5

If you want to scale the mesh, you can use the above functions that @Fyrestar linked to calculate the camera width/height at the object’s current distance. Then, divide that size by the object’s size to find the ratio comparing the view size at objects distance to the objects size. Then, scale the object by the inverse of that value. Then your object will fit in the viewport. But keep in mind if you use this approach, then your object may be different size relative to other objects.

But like @Fyrestar suggested, the better way is to find the distance where the camera view has the size of your object (with the linked functions in that thread), then move the camera by that distance. This will keep all your objects the same proportions.