Elemental Sandbox 元素技能特效沙盒

Elemental Sandbox 元素技能特效沙盒

一个用 Three.js、Vite 和手写 GLSL 构建的技能射击特效沙盒。项目最大的特点是：你看到的一切都是程序化生成的——没有贴图、没有精灵图、除了角色之外磁盘上没有任何网格模型。

核心特性

六种技能特效

项目包含六种法术，分为两种瞄准方式：

• 线型施法（Line Cast）：按技能键后地面出现类似《英雄联盟》的箭头指示器，随鼠标摆动，点击发射。

  • Q — Frost Lance 霜冻长矛：断裂锋面沿直线冲出，冰晶从地面撕裂而出，近处密集、远端展开成刀刃之墙。
  • E — Storm Lance 风暴长矛：闪电束从手中射出，身后拖曳着闪电丝束，地面留下分支状电灼痕迹。
  • R — Cinder Fall 烬落：燃烧的岩石沿弧线抛射，拖曳光线步进的燃烧尾迹，落地后炸开熔岩裂缝。
  • F — Nova Beam 新星光束：双手蓄光后沿直线释放光柱，白热核心、青色鞘层、金色螺旋带与冲击盘竞速而下。

• 远距离施法（Far Cast）：箭头被一个带有明显粗边界的圆形指示器取代，跟随光标移动，直观展示 AoE 范围。

  • V — Voltaic Snare 伏特陷阱：电流鞭甩出，落地后圆环弹开再收回，紫色光柱从中心撕裂而出。
  • X — Glacial Crown 冰川王冠：寒潮冲向目标点，圆盘冻结至边界，一圈水晶刀刃从地面环绕撕裂而出。

全程序化生成

• 冰晶是程序化几何体
• 闪电是顶点着色器完全放置的带状条
• 陨石是 CPU 上被断裂面切割的二十面球
• 光束是三个半径上绘制的参数化管体
• 陷阱的整个笼子是同一条带状条沿四条不同参数路径穿线而成
• 箭头、瞄准圈、白霜、灼痕和熔岩裂缝都是符号距离场与噪声着色器
• 雾气、火花、碎片和闪光都是 GPU 粒子

938 个实时参数滑块

每个参数都是实时滑块，模拟暂停时它们依然生效。这是项目的核心设计：用 P 键冻结爆发、打击或燃烧中的某一帧，然后针对静止画面重塑轮廓、配色和时序。

快速开始

npm install
npm run dev

然后打开 Vite 打印的地址（默认 http://127.0.0.1:5173）。

构建与预览：

npm run build
npm run preview

资源说明

public/ 目录下提供六个二进制资源，启动时自动加载：

四个 FBX 文件都是同一骨骼的 Mixamo 导出，各自携带一个蒙皮网格和一个动画栈。角色来自待机文件；施法文件仅加载其动画片段，随附的重复骨骼在 AnimationClip 被取出后立即释放。

操作方式

适用人群

本项目适合对 WebGL 着色器编程、程序化特效生成 和 Three.js 高级用法 感兴趣的开发者。如果你正在研究如何用纯代码实现游戏技能特效，或者想学习符号距离场、噪声着色器和 GPU 粒子的实际应用，这个项目是很好的参考。