Three.js Canvas透明背景实现原理
在three.js中，要使canvas背景透明，仅设置renderer.setclearcolor(0x000000, 0)是不够的。这是因为渲染器在默认情况下可能并未分配或使用透明通道。实现透明背景的关键在于两个核心步骤：
- 启用渲染器的透明通道： 在创建THREE.WebGLRenderer或THREE.CanvasRenderer实例时，必须传入一个配置对象，并将alpha属性设置为true。这会告诉渲染器，它需要为渲染结果预留一个透明通道。
- 设置清除颜色为完全透明： 在启用了透明通道后，使用renderer.setClearColor()方法来指定渲染器每次清除画布时使用的颜色。该方法的第二个参数代表透明度（alpha值），范围从0（完全透明）到1（完全不透明）。将其设置为0即可实现完全透明的背景。
实现步骤
1. 初始化渲染器时启用透明通道
无论您使用的是WebGLRenderer还是CanvasRenderer，都必须在构造函数中明确启用alpha选项。
// 对于WebGLRenderer
// renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
// 对于CanvasRenderer
renderer = new THREE.CanvasRenderer({ alpha: true });这里的alpha: true是至关重要的一步，它确保了渲染器能够处理并输出带有透明度的像素信息。
2. 设置清除颜色为完全透明
在渲染器初始化之后，您可以设置其清除颜色。为了实现透明背景，请将清除颜色的alpha值设置为0。
renderer.setClearColor(0x000000, 0); // 0x000000代表黑色，但由于alpha为0，实际颜色无关紧要
请注意，0x000000（黑色）在这里只是一个占位符颜色，因为当alpha值为0时，任何颜色都将是完全透明的。您可以根据需要选择任何颜色值。
3. CSS样式支持（可选但推荐）
当Canvas背景完全透明时，其下方的内容将透过Canvas显示出来。为了验证透明效果或为场景提供一个基础背景，您通常需要为Canvas所在的父容器或body元素设置一个背景色。
body {
/* 或者Canvas的父容器 */
background-color: #333; /* 示例：设置一个深灰色背景 */
}
.waves {
height: 100vh;
background-color: black; /* 示例：为特定容器设置黑色背景 */
}通过这种方式，当Three.js Canvas背景透明时，您就能清晰地看到其下方的HTML背景色。
完整示例：透明背景波浪粒子动画
以下是一个基于Three.js的波浪粒子动画示例，其中包含了上述所有实现透明背景的关键配置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 透明背景波浪动画</title>
<style>
body {
margin: 0;
overflow: hidden; /* 防止滚动条 */
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 2; /* 确保Canvas在其他内容之上 */
}
.waves {
height: 100vh;
background-color: black; /* Canvas下方的背景色 */
position: relative; /* 确保Canvas可以绝对定位在其内部 */
}
</style>
</head>
<body>
<!-- Three.js 库引用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<script>
var SEPARATION = 40, AMOUNTX = 130, AMOUNTY = 35;
var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
if(container) {
container.className += container.className ? ' waves' : 'waves';
}
camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 150;
camera.position.z = 300;
camera.rotation.x = 0.35;
scene = new THREE.Scene();
particles = new Array();
var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial( {
color: 0xFFFFFF, // 粒子颜色
program: function ( context ) {
context.beginPath();
context.arc( 0, 0, 0.1, 0, PI2, true );
context.fill();
}
} );
var i = 0;
for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
particle = particles[ i ++ ] = new THREE.Sprite( material );
particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) - 10 );
scene.add( particle );
}
}
// 关键配置 1: 初始化渲染器时启用透明通道
renderer = new THREE.CanvasRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
// 关键配置 2: 设置清除颜色为完全透明
renderer.setClearColor( 0x000000, 0 );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var i = 0;
for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
particle = particles[ i++ ];
particle.position.y = ( Math.sin( ( ix + count ) * 0.5 ) * 20 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 20 );
particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 2 ) * 4 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
}
}
renderer.render( scene, camera );
count += 0.2; // 控制动画速度
}
</script>
</body>
</html>在上述代码中，请注意init()函数内的以下两行：
renderer = new THREE.CanvasRenderer({ alpha: true }); // 启用透明通道
renderer.setClearColor( 0x000000, 0 ); // 设置清除颜色为完全透明同时，CSS中.waves类的background-color: black确保了当Canvas透明时，其背后的黑色背景能够显示出来，从而验证了透明效果。
注意事项与总结
- 渲染器选择： 示例中使用的是THREE.CanvasRenderer，但对于更复杂的3D场景，通常会使用THREE.WebGLRenderer。这两种渲染器都支持通过alpha: true参数启用透明背景。
- 性能考量： 启用透明通道可能会对渲染性能产生轻微影响，尤其是在移动设备或性能较低的硬件上。但在大多数现代应用中，这种影响通常可以忽略不计。
- DOM层级： 如果您的Three.js Canvas需要叠加在其他HTML内容之上，请确保通过CSS的z-index属性正确管理它们的层级关系。
- 背景可见性： 如果没有为Canvas下方的HTML元素设置背景色，那么透明的Canvas背景将显示为浏览器默认的白色背景（或用户自定义的背景），这可能会让人误以为透明设置未生效。
通过遵循本教程中的步骤，您可以轻松地在Three.js项目中实现Canvas的透明背景，从而更好地将3D内容与网页的其他部分融合，创造出更具吸引力的视觉效果。
