Repolode
提交项目
achrefelouafi

achrefelouafi/LinearAbiltyCastingThreeJS

基于 Three.js 与 GLSL 的技能特效沙盒，可实时调节 938 个参数，暂停时也能修改。

在 GitHub 查看
Star
1,015
Fork
202
未关闭 Issue
9
最近提交
26天前

这是什么？

Elemental Sandbox 是一个基于浏览器的技能特效沙盒，使用 Three.js、Vite 和手写 GLSL 编写。项目演示了六种类似英雄联盟风格的技能：四种直线施法（地面箭头瞄准）和两种范围施法（圆形瞄准圈）。所有特效均由程序化几何体、有符号距离场着色器和 GPU 粒子构成，除角色模型及其颜色贴图外，不使用纹理或雪碧图。

项目的核心是共享的参数对象：全部 938 个参数都是实时滑块，即使暂停模拟也能调节。着色器、粒子系统和灯光每帧都读取这些设置，因此可以在静止画面上直接调整定格的爆发或打击效果。内置编辑器（按 G 打开）还支持预设的保存、导出和导入。

代码结构包括带对象池的技能基类、施法瞄准控制器、包含深度预通道、泛光、ACES 色调映射和调色的渲染管线，以及 GPU 粒子系统。仓库中还保留了早期包含火、水、土、风元素的归档版本供参考。

核心功能

  • 01六种技能，支持直线施法和范围施法两种瞄准方式。
  • 02几何体与有符号距离场着色器均为程序化生成，不使用雪碧图。
  • 03938 个实时参数滑块，暂停模拟时仍可调节。
  • 04内置编辑器支持预设保存及 JSON 导出导入。
  • 05GPU 粒子系统采用环形缓冲区复用粒子槽位。
  • 06渲染管线包含深度预通道、泛光、ACES 色调映射和调色。

适用场景

  • 在 Three.js 中为游戏原型设计技能或范围伤害特效。
  • 学习 GLSL 技术，如 SDF 箭头、闪电条带和体积光束。
  • 在写入代码前交互式调整粒子和灯光效果。
  • 学习如何围绕单一共享设置对象组织实时特效项目。

快速上手

  1. 1

    安装依赖

    npm install
  2. 2

    启动开发服务器

    npm run dev
  3. 3

    打开 Vite 输出的地址（默认 http://127.0.0.1:5173）

标签

#threejs#glsl#webgl#vfx#particles#shaders#game-dev#vite

常见问题

LinearAbiltyCastingThreeJS 是什么？
基于 Three.js 与 GLSL 的技能特效沙盒，可实时调节 938 个参数，暂停时也能修改。 Elemental Sandbox 是一个基于浏览器的技能特效沙盒，使用 Three.js、Vite 和手写 GLSL 编写。项目演示了六种类似英雄联盟风格的技能：四种直线施法（地面箭头瞄准）和两种范围施法（圆形瞄准圈）。所有特效均由程序化几何体、有符号距离场着色器和 GPU 粒子构成，除角色模型及其颜色贴图外，不使用纹理或雪碧图。
LinearAbiltyCastingThreeJS 可以免费使用吗？用的什么许可证？
LinearAbiltyCastingThreeJS 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
LinearAbiltyCastingThreeJS 还在维护吗？
活跃维护中。LinearAbiltyCastingThreeJS 最近一次提交是在 2026年9月23日。
LinearAbiltyCastingThreeJS 适合用来做什么？
在 Three.js 中为游戏原型设计技能或范围伤害特效。 学习 GLSL 技术，如 SDF 箭头、闪电条带和体积光束。 在写入代码前交互式调整粒子和灯光效果。 学习如何围绕单一共享设置对象组织实时特效项目。
LinearAbiltyCastingThreeJS 怎么安装和运行？
安装依赖: npm install 启动开发服务器: npm run dev 打开 Vite 输出的地址（默认 http://127.0.0.1:5173）
在哪里获取 LinearAbiltyCastingThreeJS？
源代码和安装说明在 GitHub 上：https://github.com/achrefelouafi/LinearAbiltyCastingThreeJS

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目