three.js(七) 绘制到WebGLRenderTarget

WebGLRenderTarget 是GPU 内部对象， 主要作用是存储绘制结果，通常绘制结果直接显示到屏幕上，但是也可以暂时存储在GPU内部，以便于再次利用。对于OpenGL 来讲， RenderTarget就是一个FrameBuffer, 在这个FrameBuffer之下附带有一个颜色buffer通常即是一个Texture, 还有一个renderBuffer 通常可以是存储深度浮点信息，或者其它浮点信息。 target = new THREE.WebGLRenderTarget(WINDOW_W*0.5, WINDOW_H);这里声明一个半个屏幕宽度， 整个高度的RenderTarget.接着在绘制场景的函数中： renderer.setRenderTarget(target); renderer.clear(); renderer.render(scene, camera, target);首先设定绘制目标，清理目标， 将场景绘制到目标上。接着我们就可以使用绘制的数据了， 例如最简单的是，将绘制的场景显示在另外一个场景中的某个平面上。 scene2 = new THREE.Scene(); m2 = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial()); m2.rotation.x = -Math.PI/4; m2.rotation.y = -Math.PI/4; normalCamera = new THREE.PerspectiveCamera(90, WINDOW_W*0.5/WINDOW_H, 0.5, 2000); normalCamera.position.z = 3; scene2.add(normalCamera); scene2.add(m2);这里构建另外一个场景， 场景中有一个平面， 平面的纹理是上面的绘制结果， m2.material.map = target; m2.material.map.needUpdate = true;接着将这个新场景绘制到屏幕上， 只需要设定绘制目标为null, 就可以了。 renderer.setRenderTarget(null); renderer.clear(); renderer.render(scene2, normalCamera);这样就可以制作出类似于 显示器的效果了。