yomotsu / camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

Home Page:https://yomotsu.github.io/camera-controls/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Set the screen width and height as the boundary

front-refined opened this issue ยท comments

Is your feature request related to a problem? Please describe.

https://yomotsu.github.io/camera-controls/examples/boundary.html

This is a great project. ๐Ÿ‘

I used the boundary function and wanted to realize the screen size as the boundary. Could you please help to have a look.

โค๏ธ

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

Thanks for using camera-controls.
However, this is out-of-scope for the project so far, and sorry, I can't answer app-specific questions from all users.


Actually, screen width and height depend on the depth of the scene and the vertical FoV angle of the camera.
You could calculate the width and height at the target depth using

  • Math.tan()
  • half camera.fov in radians
  • distance between the camera and target depth.

FYI: https://www.google.com/search?q=How+to+calculate+height+with+angle+and+distance

Then get the height of the canvas in WebGL seen unit,

Untitled-1

Then you can get width using the height and camera.aspect.

As a result, you will have width and height.