Question

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

我尝试过的事情：

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

这是一个简化的fiddle，您会看到正方形（因此渲染器）覆盖背景。

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

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

1 个答案: