有没有办法让three.js相机看起来偏离中心? [英] Is there ANY way to have the three.js camera lookat being rendered off-center?

问题描述

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

Is there a way to setup the Three.js renderer in such a way that the lookat point of the camera is not in the center of the rendered image?

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

To clarify: image a scene with just one 1x1x1m cube at ( 0, 0, 0 ). The camera is located at ( 0, 0, 10 ) and the lookat point is at the origin, coinciding with the center of the cube. If I render this scene as is, I might end up with something like this:

正常渲染

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

However I'd like to be able to render this scene in such a way that the lookat point is in the upper left corner, giving me something like this:

想要的渲染

如果正常图像是 800x600，那么我想象的结果就像我渲染了一个 1600x1200 的图像，观察点位于中心，然后裁剪该正常图像，只保留右下部分.

If the normal image is 800x600, then the result I envision would be as if I rendered a 1600x1200 image with the lookat in the center and then cropped that normal image so that only the lower right part remains.

当然，我可以改变视角让立方体移动到左上角，但是我在一个角度下观察立方体，结果是这样的:

Of course, I can change the lookat to make the cube go to the upper left corner, but then I view the cube under an angle, giving me an undesired result like this:

test.moobels.com/temp/cube_angle.jpg

test.moobels.com/temp/cube_angle.jpg

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

I could also actually render the full 1600x1200 image and hide 3/4 of the image, but one would hope there is a more elegant solution. Does anybody know it?

推荐答案

如果你想让你的透视相机有一个偏离中心的视图，你需要使用的模式是:

If you want your perspective camera to have an off-center view, the pattern you need to use is:

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

查看文档:https://threejs.org/docs/#api/cameras/透视相机

您可以在本示例和这个例子.

three.js r.73

three.js r.73

这篇关于有没有办法让three.js相机看起来偏离中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！