1. 程式人生 > >threejs第十九用 rendertarget fbo

threejs第十九用 rendertarget fbo

把場景作為紋理

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