Question

我的场景中以原点为中心的宽度为100的object3D。相机的FOV为50，我希望保持不变。我目前使用

定位相机

var camDistance = (100/2)/Math.tan(50/2 * Math.PI/180);
var camHeight = camDistance * (6/25);
camera.position.set(0,camHeight,camDistance);
camera.lookAt(0,0,0);

这对于较大的显示效果很好，但是在移动设备上，对象超出了屏幕的边缘。我想改变从摄像机到对象的距离，以便无论加载的视口大小如何，对象始终在水平方向上占据屏幕的百分比。我认为应该起作用的是

var camDistance = (100/2)/Math.tan(50/2 * Math.PI/180) * (1700/window.innerWidth);

由于此fov对象占据了大约1700px。除了对象在较小的屏幕宽度上太远而在较大的屏幕宽度上太近之外，这种工作方式也是如此。

是否有一种方法可以使对象实际占据视口的相同水平百分比，而不是我想出的近似值？最好是一种避免1700px魔法的解决方案。

Answer 1

因此，如果我对您的理解是正确的，那么您只对调整对象和屏幕的宽度感兴趣，而不对高度感兴趣。

如果您添加了有关问题的HTML代码片段，将会有所帮助，因此我可以为您的应用程序尝试解决方案，但这是我可以提供的：

payments

在这里，let dz = objectWidth/(2 * Math.tan(camera.fov/2) * camera.aspect); camera.position.set(0, camHeight, margin + dz);是您可以指定的一些margin值。您还需要确保z对应于窗口的实际宽高比（以下是我为全屏应用程序动态更新的方式）：

camera.aspect

这在我为自己设置的沙箱中有效，但是请告诉我它是否也可以应用于您的应用程序，或者是否有我未考虑的内容。

在可变宽度画布Three.js中放入Object3D

1 个答案: