使渲染器的背景透明但不形成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