使渲染器的背景透明但不形成three.js

Question

我正在使用three.js，我正在显示静态背景图像，并在其上面设置渲染器动画形状。 这样做的原因是在不影响图像的情况下自由旋转形状的渲染器。 问题是背景位于渲染器后面，所以我的问题是，是否可以使渲染器的“背景”透明（允许形状仍然显示）以便完全看到背景图像？

我试过的事情：

• 在渲染器的domElement上设置不透明度
• 使用渲染器的setClearColor方法设置rgba的透明度

这是一个简化的小提琴 ，你会看到方形（因此渲染器）覆盖背景。

var square = new THREE.Shape();
square.moveTo(0, 0);
square.lineTo(0, length);
square.lineTo(length, length);
square.lineTo(length, 0);
square.lineTo(0, 0);

var geometry = new THREE.ShapeGeometry(square);
var material = new THREE.MeshBasicMaterial({ 
    color: 'rgb(59, 89, 152)',
    opacity: 1,
    transparent: true
});

var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 50;
mesh.position.y = 50;
scene.add(mesh);

// and the camera
scene.add(camera);

renderer.render( scene, camera );

Answer 1

您需要设置webGLRenderer alpha参数。

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

您可以将清除颜色保留为默认值。

renderer.setClearColor( 0x000000, 0 ); // the default

更新的小提琴： http ： //jsfiddle.net/7McS2/3/或http://jsfiddle.net/7McS2/4/

three.jr r.63