Three.js 气泡粒子效果

提示词

PROMPT
1
使用 Three.js 创建气泡粒子效果，粒子从底部向上飘升，使用自定义 Bubble 类实现粒子系统。

效果描述

这是一个展示如何创建气泡粒子效果的示例，粒子从底部向上飘升。

效果特性

  • 气泡粒子：创建气泡粒子系统
  • 向上飘升：气泡从底部向上飘升
  • 自定义类：使用自定义 Bubble 类
  • GUI 控制：使用 GUI 控制参数
  • 多种发射器：支持多种发射器类型
  • 旋转动画：气泡旋转动画

核心参数

参数 值 说明
气泡速度 0.8 气泡飘升速度
气泡大小 30 气泡大小
最大高度 10 最大高度
气泡颜色 #ff0000 气泡颜色
气泡数量 100 气泡数量
发射器类型 cone 发射器类型

核心代码解析

创建气泡

JAVASCRIPT
1
2
3
4
5
6
7
bubble = new Bubble({
    speed: 0.8,
    size: 30,
    maxHeight: 10,
    color: "#ff0000",
});
scene.add(bubble);

GUI 控制

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let params = {
    speed: 0.8,
    size: 30,
    maxHeight: 10,
    color: "#1acdf9",
    count: 100,
    radius: 10,
    rotateSpeed: 0.01,
    backgroundColor: "#000000",
    emitter: "cone",
    emitterOptions: ["cone", "cylinder", "box", "sphere"],
};

gui.add(params, "speed", -2, 2).step(0.01).onChange((v) => (bubble.speed = v));
gui.add(params, "size").onChange((v) => (bubble.size = v));
gui.add(params, "maxHeight").onChange((v) => (bubble.maxHeight = v));
gui.addColor(params, "color").onChange((v) => (bubble.color = v));
gui.add(params, "count").onChange((v) => (bubble.count = v));
gui.add(params, "radius").onChange((v) => (bubble.radius = v));
gui.add(params, "rotateSpeed").onChange((v) => (bubble.rotateSpeed = v));
gui.addColor(params, "backgroundColor").name("背景色").onChange((v) => {
    scene.background = new THREE.Color(v);
});
gui.add(params, "emitter", params.emitterOptions).name("粒子发射方式").onChange((v) => {
    bubble.emitter = v;
});

技术亮点

  1. 气泡粒子：创建气泡粒子系统
  2. 向上飘升：气泡从底部向上飘升
  3. 自定义类：使用自定义 Bubble 类
  4. GUI 控制：使用 GUI 控制参数
  5. 多种发射器：支持多种发射器类型

调试技巧

  1. 气泡速度：调整气泡飘升速度
  2. 气泡大小：调整气泡大小
  3. 最大高度：调整最大高度
  4. 气泡颜色：调整气泡颜色
  5. 发射器类型：调整发射器类型

扩展方向

  1. 多种气泡：创建多种气泡类型
  2. 复杂运动：实现更复杂的气泡运动
  3. 交互控制：添加更多交互控制
  4. 多层气泡：创建多层气泡效果
  5. 气泡动画：添加气泡动画

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