小编典典

如何将相机安装到物体上

javascript

使用three.js我有以下内容。

  • 包含多个Object3D实例的场景
  • 几个预定义的摄像机Vector3位置
  • 屏幕调整大小时画布的动态宽度/高度
  • 用户可以选择一个对象(从上方)
  • 用户可以选择相机位置(从上方)

给定正在查看的对象和摄像机位置,他们选择了如何计算最终摄像机位置以“最适合”屏幕上的对象?

如果在某些屏幕上按原样使用摄像机位置,则对象在我的视口边缘上流血,而其他对象看起来较小。我相信可以将物体安装到相机的视锥中,但找不到合适的东西。


阅读 566

收藏
2020-04-25

共1个答案

小编典典

我假设您正在使用透视相机。

您可以设置相机的位置和/或视野。

以下计算对于作为立方体的对象是准确的,因此请考虑对齐对象以面向相机的边界框。

如果摄像机居中并正视立方体,请定义

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

height = height of the cube.

如果您按照以下方式设置相机的视野

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

那么立方体的高度将与可见高度匹配。

此时,您可以将相机倒退一点,或者稍微增加视野。

如果视场是固定的,则使用以上公式求解距离。


编辑:如果要使多维数据集width匹配可见 宽度aspect则将其设置为画布的纵横比(画布宽度除以画布高度),然后像这样设置相机的视场

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

three.js r.69

2020-04-25