[英]Make a renderer's background transparent but not shapes three.js
I'm using three.js where I'm showing a static background image and having a renderer animate shapes on top of it. 我正在使用three.js,我正在显示静态背景图像,并在其上面设置渲染器动画形状。 The reason for doing this is to freely rotate the shapes' renderer without affecting the image.
这样做的原因是在不影响图像的情况下自由旋转形状的渲染器。 The problem is that the background sits behind the renderer so my question is, is it possible to make the renderer's "background" transparent (allowing the shapes to still show) in order to fully see the background image?
问题是背景位于渲染器后面,所以我的问题是,是否可以使渲染器的“背景”透明(允许形状仍然显示)以便完全看到背景图像?
Things I've tried: 我试过的事情:
Here's a simplified fiddle and you'll see that the square (thus renderer) is covering the background. 这是一个简化的小提琴 ,你会看到方形(因此渲染器)覆盖背景。
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 );
You need to set the webGLRenderer
alpha
parameter. 您需要设置
webGLRenderer
alpha
参数。
var renderer = new THREE.WebGLRenderer( { alpha: true } );
You can leave the clear color at the default value. 您可以将清除颜色保留为默认值。
renderer.setClearColor( 0x000000, 0 ); // the default
Updated fiddles: http://jsfiddle.net/7McS2/3/ or http://jsfiddle.net/7McS2/4/ 更新的小提琴: http : //jsfiddle.net/7McS2/3/或http://jsfiddle.net/7McS2/4/
three.jr r.63 three.jr r.63
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.