在二维空间中移动渲染输出

mee*_*mit 4 javascript three.js

考虑这个以世界原点为中心的立方体的简单示例。由于相机直接注视它,因此生成的渲染图像在渲染的 2D 图像中间显示了立方体,并且只有它的正面可见。我想控制那个立方体的位置。即我想将渲染输出向上和向左移动一定量。这样,例如,我可以将所有内容移动画布宽度和高度的一半,并使立方体位于渲染输出的左上角的中心。

明确地说:我不想移动相机或 3D 世界中的对象(也不想移动画布)。我只希望渲染结果本身发生变化,我想在 2D 屏幕单位而不是 3D 空间中定义这种变化。这意味着在上述转变之后,立方体的侧面仍然不可见——只有当前的正面。它还意味着,如果我将输出向左移动,则位于视图右侧但以前在框架外的某些几何图形现在将移动到视图中并被渲染。

在一些 3D 软件中,我遇到了通过修改相机的 X 和 Y“中心偏移”来做到这一点的能力。也许在three.js中我必须通过对相机或渲染器应用转换来做到这一点?我对图书馆不够熟悉,不知道去哪里挖掘。

There's no relevant code to share, but StackOverflow won't let me submit this question without some code ;)
Run Code Online (Sandbox Code Playgroud)

Wes*_*ley 5

您使用这样的模式偏移相机:

var fullWidth = window.innerWidth;
var fullHeight = window.innerHeight;
var xPixels = 600;
var yPixels = 200;

camera.setViewOffset ( fullWidth, fullHeight, xPixels, yPixels, fullWidth, fullHeight );
Run Code Online (Sandbox Code Playgroud)

要撤消它,请调用

camera.clearViewOffset();
Run Code Online (Sandbox Code Playgroud)

有关此方法和多显示器设置的更多信息,请参阅文档。它也适用于OrthographicCamera

三.js r.84