理解Three.js Canvas透明度
在Three.js中，Canvas元素默认通常会有一个不透明的背景，即使你尝试通过renderer.setClearColor(0x000000, 0)将清除颜色设置为完全透明，也可能发现背景依然是白色或黑色。这是因为要实现真正的Canvas透明度，不仅需要设置清除颜色，更关键的是要在渲染器初始化时明确启用Alpha通道。
当渲染器（无论是WebGLRenderer还是CanvasRenderer）创建时，如果未指定alpha: true，它会创建一个不带Alpha通道的渲染上下文。这意味着即使你尝试清除为透明，Canvas本身也无法处理透明度，最终会显示一个默认的不透明背景色。
实现透明背景的关键步骤
要在Three.js中为Canvas创建透明背景，需要遵循以下两个核心步骤，并结合CSS来验证效果。
1. 初始化渲染器时启用Alpha通道
这是实现透明背景的首要且最关键的一步。在创建WebGLRenderer或CanvasRenderer实例时，必须将alpha参数设置为true。
示例代码：
// 如果支持WebGL，优先使用WebGLRenderer
if (window.WebGLRenderingContext) {
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
} else {
// 否则退回到CanvasRenderer
renderer = new THREE.CanvasRenderer({ alpha: true });
}通过设置alpha: true，渲染器会创建一个支持透明度的绘图上下文，为后续的透明背景设置打下基础。
2. 设置渲染器清除颜色为透明
在渲染器初始化并启用Alpha通道后，下一步就是将渲染器的清除颜色设置为完全透明。这通过renderer.setClearColor()方法实现，其中第二个参数代表Alpha值，0表示完全透明。
示例代码：
// 设置清除颜色为黑色（或其他颜色），但Alpha值为0（完全透明） renderer.setClearColor(0x000000, 0);
这里的0x000000代表黑色，但由于Alpha值为0，实际显示时它将是完全透明的。你可以选择任何颜色作为第一个参数，只要第二个参数为0，背景都将是透明的。
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
3. 通过CSS控制底层背景（验证透明度）
为了验证Canvas是否真正透明，你需要在Canvas下方的HTML元素或body上设置一个背景色或背景图片。如果Canvas是透明的，那么这些背景将透过Canvas显示出来。
HTML结构示例：
<body>
<div class="waves">
<!-- Three.js canvas 将被添加到这里 -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<script src="your_threejs_script.js"></script>
</body>CSS样式示例：
body {
margin: 0;
overflow: hidden; /* 防止滚动条出现 */
}
.waves {
height: 100vh;
background-color: black; /* 设置一个背景色来验证Canvas的透明度 */
position: relative; /* 如果Canvas是绝对定位，父容器需要定位 */
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 2; /* 确保Canvas在其他内容之上 */
}在上述CSS中，.waves元素被赋予了一个黑色背景。如果Three.js Canvas成功设置为透明，那么这个黑色背景将透过Canvas显示出来。
完整示例：波浪粒子动画的透明背景
以下是一个整合了上述步骤的Three.js波浪粒子动画示例。这个示例展示了如何创建一个动态的粒子波浪效果，并确保其背景是透明的，从而允许其下方的HTML内容（如.waves div的背景）显示出来。
HTML文件 (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Three.js 透明背景波浪动画</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: sans-serif;
color: white;
}
.waves {
height: 100vh;
background-color: #333; /* 示例背景色，用于验证透明度 */
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 2; /* 确保Canvas在背景之上，但可能在其他前景内容之下 */
}
</style>
</head>
<body>
<div class="waves">
<span>Three.js 透明背景示例</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<script>
/*
ThreeJs custom waves
Original script by ThreeJS : https://threejs.org/examples/canvas_particles_waves.html
Modified version for Cloudoru by Kevin Rajaram : http://kevinrajaram.com
Date: 08/14/2014
*/
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.querySelector('.waves'); // 获取已存在的.waves div
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: 初始化渲染器时启用alpha通道
// 优先使用WebGLRenderer，否则回退到CanvasRenderer
if (window.WebGLRenderingContext) {
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
} else {
renderer = new THREE.CanvasRenderer({ alpha: true });
}
renderer.setSize(window.innerWidth, window.innerHeight);
// 关键步骤2: 设置清除颜色为完全透明
renderer.setClearColor(0x000000, 0); // 黑色，alpha为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()函数内的以下两行：
// 关键步骤1: 初始化渲染器时启用alpha通道
if (window.WebGLRenderingContext) {
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
} else {
renderer = new THREE.CanvasRenderer({ alpha: true });
}
// 关键步骤2: 设置清除颜色为完全透明
renderer.setClearColor(0x000000, 0);这两行确保了渲染器能够处理透明度，并将Canvas的背景设置为完全透明。通过CSS中的.waves类的background-color: #333;，你可以清楚地看到Canvas下方的背景色透过粒子动画显示出来。
注意事项
- 渲染器选择： 示例中同时考虑了WebGLRenderer和CanvasRenderer。在现代浏览器中，通常推荐使用WebGLRenderer以获得更好的性能和视觉效果。CanvasRenderer适用于不支持WebGL的环境。无论选择哪种，alpha: true都是必需的。
- 性能影响： 启用Alpha通道通常不会对性能产生显著的负面影响，但如果同时进行大量复杂的透明度混合操作，可能会略微增加渲染负担。
- z-index层叠： 如果你的Three.js Canvas需要与其他HTML元素进行层叠，请确保正确设置Canvas元素及其父容器的position和z-index属性，以控制它们的显示顺序。通常，Canvas会覆盖在其父容器的其他内容之上。
- 背景验证： 务必在Canvas的父容器或body上设置一个可见的背景色或图片，以便直观地验证Canvas是否已成功实现透明。
总结
在Three.js中实现Canvas的透明背景是一个常见的需求，它允许我们将3D场景无缝地融入到现有的网页设计中。关键在于两步：首先，在渲染器初始化时通过alpha: true参数启用Alpha通道；其次，使用renderer.setClearColor(0x000000, 0)将渲染器背景色设置为完全透明。结合适当的CSS样式，你就可以轻松创建出与网页背景完美融合的Three.js动画和场景。
