Three.js Canvas透明背景实现教程-js教程-PHP中文网

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

聖光之護

发布： 2025-09-02 11:34:01

原创

684人浏览过

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

本教程详细指导如何在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能够覆盖整个视口且不影响布局，我们通常会对其进行定位。

Starry.ai

AI艺术绘画生成器

查看详情

/* 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则用于抗锯齿，使渲染效果更平滑。我们还包含了一个简单的逻辑来优先

以上就是Three.js Canvas透明背景实现教程的详细内容，更多请关注php中文网其它相关文章！