threejs第十九用 rendertarget fbo
阿新 • • 發佈:2018-11-22
把場景作為紋理
const renderTarget = new THREE.WebGLRenderTarget( 1920, 1280); var renderS = new THREE.Scene(); renderS.add(new THREE.AmbientLight(0xffffff)); var light = new THREE.DirectionalLight(0xffbbbb, 0.6); light.position.set(1, 1, 1); light.castShadow = true; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; var d = 10; light.shadow.camera.left = - d; light.shadow.camera.right = d; light.shadow.camera.top = d; light.shadow.camera.bottom = - d; light.shadow.camera.far = 1000; renderS.add(light); var s = new THREE.Scene(); var c = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); var r = new THREE.WebGLRenderer({ alpha: true, antialias: true }); c.lookAt(new THREE.Vector3(0, 0, 0)); c.position.set(0, 0, 10); r.setClearColor(0x000000, 0); r.setSize(window.innerWidth, window.innerHeight, false); document.body.appendChild(r.domElement); s.add(new THREE.AmbientLight(0xffffff)); var light = new THREE.DirectionalLight(0xffbbbb, 0.6); light.position.set(1, 1, 1); light.castShadow = true; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; var d = 10; light.shadow.camera.left = - d; light.shadow.camera.right = d; light.shadow.camera.top = d; light.shadow.camera.bottom = - d; light.shadow.camera.far = 1000; s.add(light); var render = function () { if(renderS) r.render(renderS,c,renderTarget); r.render(s, c); requestAnimationFrame(render); }
renderTarget.texture就是紋理了。
原理就是FBO