CODEWITHSUNDEEP
three.js
dman
dman

Reputation: 11064

EffectComposer Not Allowing Opacity In Three.js

How can I get EffectComposer not to kill background opacity?

I found SO post How do I stop EffectComposer from destroying my transparent background?, but I am not having success.

// create a camera, which defines where we're looking at.
var camera = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);

scene.add(camera);

// create a render and set the size
var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
var renderTarget = new THREE.WebGLRenderTarget(
  window.innerWidth, window.innerWidth, parameters );

var renderer = new THREE.WebGLRenderer( { alpha: true } );

renderer.setClearColor(new THREE.Color(0xFFFFFF, 0));
renderer.setSize(window.innerWidth, window.innerHeight);

var planeGeometry = new THREE.PlaneGeometry(0, 0);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x000000,
                                                depthTest: false });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
//plane.position.z = -100;
plane.scale.set(1000, 1000, 1, 1);
// add the plane to the scene
scene.add(plane);

document.getElementById("WebGL-output").appendChild(renderer.domElement);
var renderPass = new THREE.RenderPass(scene, camera);
var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
effectFilm.renderToScreen = true;

var composer = new THREE.EffectComposer(renderer, renderTarget);
composer.addPass(renderPass);
composer.addPass(effectFilm);

Upvotes: 0

Views: 1003

Answers (1)

WestLangley
WestLangley

Reputation: 104783

Make sure you are setting the clear color properly.

renderer.setClearColor( 0x000000, 0 );

three.js r.78

Upvotes: 1

Related Questions