Three.js – Width of view

by

You have to be precise here.

You can calculate the visible rectangular region given the camera’s field-of-view, camera.fov, and a given distance, dist, from the camera.

Since the object presumably has depth, you have to pick one plane through the mesh, and do the calculation at that distance.

Here is how to calculate the visible height and width for a given distance dist from the camera.

var vFOV = THREE.MathUtils.degToRad( camera.fov ); // convert vertical fov to radians

var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

var width = height * camera.aspect;           // visible width

three.js r.117

More Related Contents:

  1. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  2. THREE.js Ray Intersect fails by adding div
  3. THREE.js : 2xMeshes using same vector as position
  4. How to find the unicode of the subscript alphabet?
  5. Converting World coordinates to Screen coordinates in Three.js using Projection
  6. Transparent background with three.js
  7. Multiple transparent textures on the same mesh face in Three.js
  8. How to get the absolute position of a vertex in three.js?
  9. Three.js / WebGL – transparent planes hiding other planes behind them
  10. Rendering a transparent shell
  11. How do you save an image from a Three.js canvas?
  12. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  13. Three.js – Geometry on top of another
  14. Three.js/WebGL: Large spheres appear broken at intersection
  15. Three.js cube with different texture on each face
  16. Three.js and loading a cross-domain image
  17. How to change face color in Three.js
  18. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  19. How to save canvas animation as gif or webm?
  20. How to get the global/world position of a child object?
  21. Orthographic camera and selecting objects with raycast
  22. catch the click event on a specific mesh in the renderer
  23. Three.JS wireframe material – all polygons vs. just edges
  24. How to create a custom mesh on THREE.JS?
  25. Determine if a mesh is visible on the viewport according to current camera
  26. Three.js add an object to a group but keep global position/rotation/scale as it was
  27. How to flip a Three.js texture horizontally
  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