EffectComposer 不允许 Three.js 中的不透明度

EffectComposer Not Allowing Opacity In Three.js

我怎样才能让 EffectComposer 不消除背景不透明度?

我发现了 SO 帖子如何阻止 EffectComposer 破坏我的透明背景?,但我没有成功。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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);


确保正确设置透明颜色。

1
renderer.setClearColor( 0x000000, 0 );

three.js r.78