javascript - Threejs正交相机视口

Question

我使用正交相机，但我很难正确计算视口。我想将相机向左推 100 像素以在额外区域渲染其他内容。

在下面的示例中，有一个渲染的绿色立方体（我想为其修复我的视口）和红色方块（期望使用 css 生成的结果）。我无法更改画布大小 - 它必须是 100% 宽度和 100% 高度。到目前为止，最好的解决方案是为左侧相机增加额外的价值，例如：

camera.left   = - frustumSize * correctionAspect + 10;

但当然它不会扩展。其他解决方案是使用不同的 aspectRatio 计算 camera.left ，如注释代码中：

correctionAspect = (width + 200) / height;

但它也不好用。

示例代码：https ://stackblitz.com/edit/js-nydhjw

标签： javascriptthree.js