文章导读

Three.js Canvas透明背景实现教程

作者 2025年9月2日 8

本教程详细指导如何在Three.js中创建透明背景的canvas。核心步骤包括在初始化渲染器时设置alpha: true参数，并使用renderer.setClearColor()将背景颜色清空为完全透明。通过具体代码示例，展示如何将粒子波浪动画集成到具有自定义背景的网页中，确保Canvas内容与底层html背景完美融合。

核心原理：启用透明渲染

在three.JS中，要使canvas背景透明，仅靠调用renderer.setclearcolor(0x000000, 0)并不能完全奏效。这是因为渲染器在默认情况下可能不会分配一个带有alpha通道的绘图上下文。因此，实现透明背景的关键在于两个步骤：

在渲染器初始化时启用Alpha通道： 无论是THREE.WebGLRenderer还是THREE.CanvasRenderer，在创建实例时都必须传入一个配置对象，并将alpha属性设置为true。这将告诉浏览器为Canvas元素分配一个支持透明度的绘图上下文。
```
// 对于WebGLRenderer renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); // 对于CanvasRenderer renderer = new THREE.CanvasRenderer({ alpha: true });
```
设置清除颜色为完全透明： 在渲染器初始化后，使用renderer.setClearColor()方法设置清除颜色。该方法接受两个参数：颜色值（例如十六进制颜色码）和透明度（alpha值，范围0到1）。要实现完全透明，需将alpha值设为0。颜色值本身可以是任意的，因为alpha为0时它将不可见。
```
renderer.setClearColor(0x000000, 0); // 将背景色设置为黑色，透明度为0
```
请注意，这里的0x000000仅是一个占位符，因为透明度为0时颜色本身没有视觉效果。

实现步骤与示例

为了更直观地演示，我们将以上原理应用于一个Three.js粒子波浪动画示例，使其背景透明并显示其下方的html元素背景。

HTML结构

首先，我们需要一个基本的HTML文件，并引入Three.js库。为了演示Canvas的透明性，我们会在body中放置一个用于容纳Canvas的div，并为其设置一个背景色。

<!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>     <link rel="stylesheet" href="style.css"> </head> <body>     <!-- Canvas将由JavaScript动态添加到这个div中 -->     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>     <script src="script.js"></script> </body> </html>

CSS样式

为了让Canvas下方的背景可见，我们需要为包含Canvas的容器（或body本身）设置一个背景色。同时，为了确保Canvas能够覆盖整个视口且不影响布局，我们通常会对其进行定位。

/* style.css */ body {     margin: 0;     overflow: hidden; /* 防止滚动条出现 */ }  .waves {    height: 100vh; /* 容器高度占满视口 */   background-color: black; /* 容器的背景色，用于演示Canvas透明 */   position: relative; /* 使内部绝对定位的canvas相对于它定位 */ }  canvas {   position: absolute; /* 绝对定位，覆盖父容器 */   top: 0;   left: 0;   width: 100%;   height: 100%;   z-index: 2; /* 确保Canvas在其他内容之上（如果存在） */ }

JavaScript代码（script.js）

我们将修改原始的粒子波浪动画脚本，重点关注init()函数中渲染器的初始化部分。

// script.js  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);     // 为容器添加CSS类名 'waves'     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);         }     }      // 核心修改：初始化渲染器时设置 alpha: true     // 根据浏览器支持情况选择 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);      // 核心修改：设置清除颜色为完全透明     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; // 动画速度 }

关键代码解析

渲染器初始化 (init 函数内):
```
if (window.WebGLRenderingContext) {     renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); } else {     renderer = new THREE.CanvasRenderer({ alpha: true }); }
```
这里是实现透明背景的核心。{ alpha: true }参数确保了渲染器将创建一个带有透明度通道的Canvas上下文。antialias: true则用于抗锯齿，使渲染效果更平滑。我们还包含了一个简单的逻辑来优先

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！