How to Fit Camera to Object

by

I am assuming you are using a perspective camera.

You can set the camera’s position, field-of-view, or both.

The following calculation is exact for an object that is a cube, so think in terms of the object’s bounding box, aligned to face the camera.

If the camera is centered and viewing the cube head-on, define

dist = distance from the camera to the _closest face_ of the cube

and

height = height of the cube.

If you set the camera field-of-view as follows

fov = 2 * Math.atan( height / ( 2 * dist ) ) * ( 180 / Math.PI ); // in degrees

then the cube height will match the visible height.

At this point, you can back the camera up a bit, or increase the field-of-view a bit.

If the field-of-view is fixed, then use the above equation to solve for the distance.

EDIT: If you want the cube width to match the visible width, let aspect be the aspect ratio of the canvas ( canvas width divided by canvas height ), and set the camera field-of-view like so

fov = 2 * Math.atan( ( width / aspect ) / ( 2 * dist ) ) * ( 180 / Math.PI ); // in degrees

three.js r.69

More Related Contents:

  1. “Cross origin requests are only supported for HTTP.” error when loading a local file
  2. THREE.js generate UV coordinate
  3. Drawing a line with three.js dynamically
  4. THREE.js : 2xMeshes using same vector as position
  5. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  6. Thickness of lines using THREE.LineBasicMaterial
  7. How to find the unicode of the subscript alphabet?
  8. Using textures in THREE.js
  9. Multiple transparent textures on the same mesh face in Three.js
  10. How to stop a requestAnimationFrame recursion/loop?
  11. Three JS – Find all points where a mesh intersects a plane
  12. How to get the absolute position of a vertex in three.js?
  13. Any way to get a bounding box from a three.js Object3D?
  14. Three.js Projector and Ray objects
  15. How to detect collision in three.js?
  16. Three.js – Geometry on top of another
  17. Three.js/WebGL: Large spheres appear broken at intersection
  18. Convert 2:1 equirectangular panorama to cube map
  19. Three.js cube with different texture on each face
  20. Three.js and loading a cross-domain image
  21. How to save canvas animation as gif or webm?
  22. How to create a custom mesh on THREE.JS?
  23. Detect clicked object in THREE.js
  24. Determine if a mesh is visible on the viewport according to current camera
  25. How to render clipped surfaces as solid objects
  26. How to flip a Three.js texture horizontally
  27. Three.js multiple materials on object loaded via OBJMTLLoader
  28. Why do shaders have to be in html file for webgl program?
  29. How to toggle preserveDrawingBuffer in three.js?
  30. Apply color gradient to material on mesh – three.js

Leave a Comment