时间戳

首页 > 解决方案 > 三.js/WebGL 使透视相机缩小直到所有物体都可见

three.js - 三.js/WebGL 使透视相机缩小直到所有物体都可见

问题描述

我有一个滑块控制要显示的一行中的项目数，每个都是 w 单位宽和 d 单位高，最终，它们会离开屏幕，我如何动态缩放以便

A）所有项目跨越特定数量的单位 B）所有项目跨越特定数量的像素（使其响应）

我尝试使用此处的代码： https ://discourse.threejs.org/t/solved-how-do-we-size-something-using-screen-pixels/1177

一种解决方案是迭代场景中的对象，应用平截头体相交，如果不是，则继续缩小。我想不出仍然使用透视相机的非迭代解决方案。

任何帮助表示赞赏。

但它会暴力破解值，其次它在大量时不准确

标签： three.js

解决方案

这里有一些代码可能显示了一个解决方案。基本上你可以使用

const box = new THREE.Box3().setFromObject(root);

计算一个包含整个场景或某个子树的框

然后你可以得到盒子的大小和中心

const boxSize = box.getSize(new THREE.Vector3()).length();
const boxCenter = box.getCenter(new THREE.Vector3());

然后你可以计算出你需要把相机从盒子的中心放多远才能适应屏幕

const halfSizeToFitOnScreen = boxSize * 0.5;
const halfFovY = THREE.Math.degToRad(camera.fov * .5);
const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);

distance现在您需要如何将相机远离盒子的中心才能查看整个盒子。（或者更确切地说，让盒子的中心适合屏幕）。有一个点距离一个点的球体，所以你可以选择一个。例如 boxCenter + [0, 0, distance] 会将相机从盒子中心放在 z 轴下方。

推荐阅读