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示例。

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

2 个答案: