项目►前端/可视化

drone-show · 项目介绍

drone-show

本页由项目自动归档生成，源码与最新进展以 GitHub 仓库为准。

项目简介

drone-show 是一组基于 Three.js 的 3D 无人机编队表演特效页面，主体实现球形编队，另含蝴蝶编队及其变换演示。它用程序化建模的无人机模型与黄金螺旋（Fibonacci Sphere）均匀分布算法，呈现可实时调参的灯光、呼吸与旋转动画，适合作为 WebGL 可视化与无人机表演预演的演示。

技术栈

维度 技术
主要语言/框架 原生 JavaScript（无框架）
关键依赖/库 Three.js r128（本地 three.min.js 引入，无 CDN 依赖）
数据存储 无（纯前端）
运行/部署方式 浏览器直接打开对应 HTML 文件，零构建、零后端

核心功能 / 亮点

  • 真实无人机模型：每架含主体机身、四个机臂、螺旋桨（发光）与中心 LED 灯（app.js 中建模）。
  • 球形编队：用黄金螺旋（Fibonacci Sphere）算法让无人机在球面上均匀分布，避免聚集与空隙。
  • 动态灯光：LED 颜色在 HSL 色彩空间循环变化；螺旋桨带发光效果。
  • 呼吸动画：整机尺寸做呼吸式缩放。
  • 自由旋转：OrbitControls 实现鼠标拖拽旋转、滚轮缩放，含 FPS 实时监控。
  • 实时控制面板：可调整无人机数量（50–500）、球体半径（50–200）、旋转速度与呼吸速度。
  • 星空背景：5000 颗星点作为场景背景。
  • 蝴蝶编队：butterfly.html / butterfly.js 与 butterfly-formation.html / butterfly-formation.js 提供蝴蝶形状编队及其变换演示。

目录结构

1
2
3
4
5
6
7
8
9
10
drone-show/
├── index.html                   # 主页面（球形编队入口）
├── app.js                       # 球形编队核心逻辑与 3D 渲染
├── butterfly.html               # 蝴蝶编队页面
├── butterfly.js                 # 蝴蝶编队逻辑
├── butterfly-formation.html     # 蝴蝶编队变换演示页面
├── butterfly-formation.js       # 蝴蝶编队变换逻辑
├── three.min.js                 # Three.js 库（r128，本地引入）
├── README.md                    # 说明文档
└── roadmap.md

相关链接