three.js(七) 绘制到WebGLRenderTarget

2019独角兽企业重金招聘Python工程师标准>>>

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);这样就可以制作出类似于 显示器的效果了。

转载于:https://my.oschina.net/u/186074/blog/79062