javascript - 使渲染器的背景透明但不具有形状three.js

我正在使用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 );

最佳答案

您需要设置 webGLRenderer alpha 参数。

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

您可以将透明颜色保留为默认值。

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

更新 fiddle :http://jsfiddle.net/7McS2/3/ 或 http://jsfiddle.net/7McS2/4/

三.jr r.63

关于javascript - 使渲染器的背景透明但不具有形状three.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20477951/