0

What I am trying to do is reposition the camera by adjusting its position.y property so that the model "moves" towards the top of the viewport (i.e. camera.position.y -= N) as the user scrolls down the page. In other words, what I am trying to do is figure out how to calculate the value by which I must adjust camera.position.y so that the bottom of the model is sitting right above the top of the viewport without actually moving the camera manually and then hardcoding this value.

We can create a new THREE.Box3().setFromObject(model) object, which provides the outerbounds of the model. Then, there is the distanceToPoint method, but what is the "point" of the top of the viewport i.e. the max frustum value?

The camera.fov value is 7, but this means the viewing angle of the frustum is 7 degrees.

If 7 were instead a camera.position.y unit instead of degrees, fov - Math.abs(boundingBox.min.y)) would return the distance from the top of the viewport or the max frustum value to the bottom of the model.

I have no idea how to calculate how far down I need to move the camera so that the model is moved towards the top of the viewport so that the model is completely out of view and not a single pixel more out of view. How can I calculate the distance from the top of the viewport or max frustum value to the bottom of the model in camera.position.y units? Does anybody know how to calculate this?

Rabbid76
  • 202,892
  • 27
  • 131
  • 174
oldboy
  • 5,729
  • 6
  • 38
  • 86
  • Using a bounding box won't necessarily give you a pixel-perfect clip. I find it easier to use bounding spheres. You don't get pixel-to-edge perfection, but a sphere is the same regardless of view direction, which makes it easier to calculate. Regardless, you're going to want to convert your corner vectors into camera space (`camera.worldToLocal( aCorner )`) and use [trigonometry](https://en.wikipedia.org/wiki/Trigonometric_functions#Right-angled_triangle_definitions) to figure out where those points are in relation to vectors that make up the frustum. – TheJim01 Aug 16 '23 at 04:44
  • @TheJim01 tysm for your answer! how do i obtain the vectors that make up the frustum? – oldboy Aug 16 '23 at 07:42
  • @TheJim01 and by "corner vectors," you mean the corners of the Box3 of the model or? – oldboy Aug 16 '23 at 08:16
  • This question is not entirely clear to me. However see [THREE.JS update the fov value of a perspective camera and keep the same camera distance](https://stackoverflow.com/questions/57959190/three-js-update-the-fov-value-of-a-perspective-camera-and-keep-the-same-camera-d/57977155#57977155) and [How to compute the size of the rectangle that is visible to the camera at a given coordinate?](https://stackoverflow.com/questions/46578529/how-to-compute-the-size-of-the-rectangle-that-is-visible-to-the-camera-at-a-give/46586193#46586193) – Rabbid76 Aug 16 '23 at 21:26
  • @Rabbid76 perhaps i worded it clumsily cuz ThreeJS is brand new to me, but what im trying to do is reposition the camera by adjusting its Y property (i.e. `camera.position.y`) so that the model "moves" towards the top of the viewport (i.e. `camera.position.y -= N`) as the user scrolls the page; in other words, what im trying to do is calculate how much i have to adjust the `camera.position.y` value so that the bottom of the model is sitting right above the top of the viewport without actually moving the camera manually and then hardcoding this value. does this make sense? i will check ur links – oldboy Aug 17 '23 at 01:22
  • I was referring to the `Box3`. Your question could probably benefit from some pictures to illustrate what you want, even if you mock something up in paint. – TheJim01 Aug 17 '23 at 13:15
  • @TheJim01 ill add some photos and notify you as soon as i get some free time. i had wasted so much time on trying to figrue this out that i had decided to manually figure out the value and ya – oldboy Aug 18 '23 at 03:45

0 Answers0