有什么方法可以让 three.js 相机的外观偏离中心呈现？答案

【问题标题】：Is there ANY way to have the three.js camera lookat being rendered off-center?有什么方法可以让 three.js 相机的外观偏离中心呈现？
【发布时间】：2017-06-08 17:37:33
【问题描述】：

有没有办法设置 Three.js 渲染器，使相机的注视点不在渲染图像的中心？

澄清一下：在 ( 0, 0, 0 ) 处仅使用一个 1x1x1m 立方体对场景进行成像。相机位于 (0, 0, 10) 处，观察点位于原点，与立方体的中心重合。如果我按原样渲染这个场景，我可能会得到这样的结果：

normal render

但是我希望能够以观察点位于左上角的方式渲染这个场景，给我这样的东西：

desired render

如果正常图像是 800x600，那么我设想的结果是，我渲染了一个 1600x1200 的图像，中间是lookat，然后裁剪了该正常图像，只剩下右下部分。

当然，我可以更改外观以使立方体转到左上角，但是然后我以一个角度查看立方体，给我一个不希望的结果，如下所示：

test.moobels.com/temp/cube_angle.jpg

我实际上也可以渲染完整的 1600x1200 图像并隐藏 3/4 图像，但希望有更优雅的解决方案。有人知道吗？

【问题讨论】：

看看this example 或this example 是不是你要找的。span>
@WestLangley 先生，您是国王先生。
@kevin 问题中缺少您的图片，为了帮助其他人，您能否将它们直接附加到您的问题中？

标签： three.js renderer

【解决方案1】：

如果您希望透视相机具有偏离中心的视图，您需要使用的模式是：

camera = new THREE.PerspectiveCamera( for, aspect, near, far );
camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );

查看文档：https://threejs.org/docs/#api/cameras/PerspectiveCamera

您可以在this example 和this example 中找到这种用法的示例。

three.js r.73

【讨论】：

【解决方案2】：

这是一个简单的解决方案：

假设你的立方体是 4 x 4 x 4，在位置 0、0、0：

var geometry = new THREE.BoxGeometry( 4, 4, 4 );
var material = new THREE.MeshBasicMaterial( { color: 0x777777 } );
var cube = new THREE.Mesh( geometry, material );
cube.position.set( 0, 0, 0 );

获取立方体的位置：

var Vx = cube.position.x, 
    Vy = cube.position.y, 
    Vz = cube.position.z;

然后从x位置减去2，然后在y和z位置加上2，并使用这些值创建一个新的Vector3：

var newVx = Vx - 2,
    newVy = Vy + 2;
    newVz = Vz + 2;

var xyz = new THREE.Vector3(newVx, newVy, newVz)

然后相机看：

camera.lookAt(xyz);

使用控制台日志，它会显示相机现在正在查看 -2、2、2，即立方体的左上角。

console.log(xyz);

【讨论】：