在 THREE.js（3D 渲染目标）中使场景成为 3D 纹理

Question

我正在查看位于 here 的 THREE.js 示例，想知道如何防止渲染为纹理的场景“扁平化”。换句话说，当设置为WebGLRenderTarget 时，场景失去了有深度的错觉。

我到处查看，包括在 THREE.js 文档中，并没有发现这种功能的提及，可能是因为它会给用户的处理器带来不必要的大量负载（除了在非常特殊的情况下）。不过，也许这在纯 WebGL 中是可能的？

编辑： Downvoters - 为什么这个问题很糟糕？我已经对这个问题进行了大量研究，但是由于我是 WebGL 新手，所以我不能完全吐出毫无意义的代码......我该如何改进我的查询？

Answer 1

如果有意义的话，我认为您想使用屏幕空间投影而不是 UV 投影。以您的电视示例为例，屏幕上的 UV 点会随着您移动相机而发生变化。你想要一些保持不变的东西，即。无论你移动多少，你都在看同样的东西。我不确定在没有着色器的情况下如何做到这一点，但在片段着色器中你有 gl_FragCoord

Answer 2

因为 THREE.js “扁平化”了它渲染的每个场景，所以只需要改变视角（相对于主场景的主摄像头）来保持渲染目标的深度错觉。这是一个可以做到这一点的东西的骨架：

var scene = new THREE.Scene(),
    rtScene = new THREE.Scene(),
    camera = new THREE.PerspectiveCamera( ..... ),
    rtCamera = new THREE.PerspectiveCamera( ..... ),
    rtCube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1), new THREE.MeshSimpleMaterial({ color: 0x0000ff }),
    rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat }),
    material = new THREE.MeshBasicMaterial({ map: rtTexture }),
    cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1), material);

function init() {
  //manipulate cameras
  //add any textures, lighting, etc

  rtScene.add( rtCube );
  scene.add( cube );
}

function update() {
   //some function of cube.rotation & cube.position
   //that changes the rtCamera rotation & position,
   //depending on the desired effect.
}

function animate() {
  requestAnimationFrame( animate );
  render();
}

function render() {
  renderer.clear();
  update();
  renderer.render( rtScene, rtCamera, rtTexture, true );
  renderer.render( scene, camera );
}

init();
animate();

我在我的代码中假设camera 将保持静止，而cube 围绕y 轴旋转。每个面都有自己的material 更新实例。每个人脸的 update() 函数是一堆三角函数，可以很容易地用余弦定律推导出来。一旦我的本地工作正常，我将发布一个 jsFiddle 示例。