three.js渲染到纹理Alpha无法正常工作

Question

I am trying to render to a texture with alpha and render that texture on top of a scene. The texture's background is not transparent though, the clear color is rendered over the scene.

I created the renderer with alpha:true, the clear color has alpha 0, And the texture's format is RGBA

What am I missing?

//creating the texture
rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, 
    window.innerHeight, { minFilter: THREE.LinearFilter, 
    magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );

//creating renderer
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;

//textured quad
var quad = new THREE.PlaneBufferGeometry(camSize,camSize/aspect);
var mat = new THREE.MeshBasicMaterial({map:rtTexture,
    depthWrite:false, depthTest: false});
var quadOb = new THREE.Mesh(quad, mat);

//rendering
renderer.setClearColor(0x000000, 0);
renderer.render(sceneTorus, camera, rtTexture, true);
renderer.render(sceneTet, cameraRTT, null, true);
renderer.render(sceneQuad, cameraRTT, null, false);

Answer 1

quadOb.material.transparent = true;