Three.js 3D 圆扩散

提示词

PROMPT
1
使用 Three.js 创建 3D 半圆扩散效果，结合纹理贴图和透明度动画实现扩散波效果。

效果描述

这是一个展示如何创建 3D 半圆扩散效果的示例。

效果特性

  • 3D 半圆：使用 SphereGeometry 创建 3D 半圆
  • 扩散动画：半圆扩散动画
  • 透明度动画：透明度渐变动画
  • 纹理贴图：使用纹理贴图
  • 缩放动画：缩放动画
  • TWEEN 动画：使用 TWEEN 库

核心参数

参数 值 说明
半圆半径 50 半圆半径
分段数 120, 120 半径分段、高度分段
扩散范围 160 扩散范围
缩放速度 1/60, 1/80 XYZ 缩放速度
透明度范围 0-1 透明度范围

核心代码解析

创建 3D 半圆

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function scatter3DCircle(r) {
    const geometry = new THREE.SphereGeometry(
        r,
        120,
        120,
        0,
        Math.PI * 2,
        0,
        Math.PI / 2,
    );

    let circle = new THREE.Mesh(
        geometry,
        new THREE.MeshBasicMaterial({
            map: new THREE.TextureLoader().load(
                "../../../files/images/gradual_red_01.png",
            ),
        }),
    );

    return circle;
}

动画循环

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let s = 0, p = 0;

function animate() {
    requestAnimationFrame(animate);

    if (s > 160) {
        ((s = 0), (p = 160));
    }
    circle3D.scale.set(1 + s / 60, 1 + s / 80, 1 + s / 60);
    circle3D.material.opacity = p / 160;
    s++;
    p--;

    TWEEN.update();
    renderer.render(scene, camera);
}

技术亮点

  1. 3D 半圆：使用 SphereGeometry 创建 3D 半圆
  2. 扩散动画：半圆扩散动画
  3. 透明度动画：透明度渐变动画
  4. 纹理贴图：使用纹理贴图
  5. TWEEN 动画：使用 TWEEN 库

调试技巧

  1. 扩散速度：调整扩散速度
  2. 缩放速度：调整缩放速度
  3. 透明度速度：调整透明度变化速度
  4. 纹理贴图：更换纹理贴图
  5. 半圆参数：调整半圆参数

扩展方向

  1. 多层扩散：创建多层扩散效果
  2. 不同形状：使用不同形状
  3. 颜色渐变：添加颜色渐变
  4. 交互控制：添加交互控制
  5. 复杂动画：创建复杂动画

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。