Question

考虑以世界起源为中心的立方体的this simple example。由于相机直接观察它，因此生成的渲染图像在渲染的2D图像的中间显示立方体，并且只有其正面可见。我希望控制该多维数据集的位置。即我想将渲染的输出向上和向左移动一些量。这样，我可以将所有内容移动到画布的宽度和高度的一半，并使多维数据集位于渲染输出的左上角。

要明确：我不想在3D世界（也不是画布）中移动相机或物体。我只是希望渲染结果本身发生变化，我想在2D屏幕单元中定义这种变化而不是在3D空间中。它需要在所述移位之后，立方体的侧面仍然不可见 - 只有当前的正面。它还需要如果我将输出移到左侧，那么在视图右侧但先前在帧外的某些几何体现在将移入视图并被渲染。

在某些3D软件中，我通过修改相机的X和Y＆＃34;中心移位＆＃34;来遇到了这样做的能力。也许在three.js中，我必须通过对相机或渲染器应用转换来实现吗？我对图书馆不熟悉，不知道在哪里挖掘。

There's no relevant code to share, but StackOverflow won't let me submit this question without some code ;)

Answer 1

使用如下图案偏移相机：

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

camera.setViewOffset ( fullWidth, fullHeight, xPixels, yPixels, fullWidth, fullHeight );

要撤消它，请致电

camera.clearViewOffset();

有关此方法和多显示器设置的详细信息，请参阅docs。它也适用于OrthographicCamera。

three.js r.84

Answer 2

为什么不使用canvas translate？

做这样的事情：

  // adjust for camera
  ctx.translate(-this.camera.x, -this.camera.y);

  // render scene here

  // end of camera view
  ctx.translate(this.camera.x, this.camera.y);

在2d空间中移动渲染的输出

2 个答案: