Search code examples
three.jscameradistancearcgis-js-api

ThreeJS Minimum screen width for a single object

I am using a very similar project to this example: https://developers.arcgis.com/javascript/latest/sample-code/scene-external-renderer-threejs/index.html

This application is displaying a 3D Object (ISS). If you zoom out, the object gets smaller (logical), however I want to have a minimum size for this object. I always want this object to take at least 10 % of the screen width.

How can I achieve this goal?

I don't want to restrict the camera movement by any metods, but I want to enlarge the object itself.

Solution

  • To get this working you need:

    1. Compute bounding Spehre on a geometry of your object using boundingSphere (Geometry)

    2. Project bounding spere (example of projection: Converting World coordinates to Screen coordinates in Three.js using Projection)

    3. Check if pojected object width is not less than 10% of window width.