使物体移动到侧面响应正交相机三个js

Question

我正在尝试找出在所有设备上确定模型位置（并根据需要进行缩放）的最佳方法，而不仅仅依赖于匹配媒体。 Ofc 我无法使用 %，那么 Three.js 中是否有内置的东西可以帮助我实现最佳结果？任何其他解决方案（如果有人有的话）也非常感激。现在我在场景中使用正交相机。

事情是这样的： 我希望模型的位置像这样

但是当然，当我调整屏幕大小时，它会像这样被剪切掉

我的调整大小代码就这么简单：

rendererSize.width = window.innerWidth;
rendererSize.height = window.innerHeight;

aspect = rendererSize.width / rendererSize.height;

//* [ORTHOGRAPHIC CAMERA]
camera.left = -f * aspect;
camera.right = f * aspect;

camera.updateProjectionMatrix();
renderer.setSize(rendererSize.width, rendererSize.height);

Answer 1

您的方向是正确的，但缺少一点。

看起来模型的锚点可以表示为

vec2(0.5, 0.5)

。 如果将对象的位置设置为

vec3(0, 0, 0)

，您将看到该对象绝对居中，这意味着对象的中心也是屏幕的中心。

最有可能的是，在调整大小功能中，您将半屏幕尺寸添加为

position.x

。 这意味着您将锚点移开半个屏幕，因此一半的对象将被隐藏。您需要将对象宽度的一半减去偏移量。 您可以通过获取

boundingBox

来获取对象的宽度。