An open-source, login-free catalog of interactive Three.js/WebGL UI components with live renderers and full React source.
achrefelouafi/LinearAbiltyCastingThreeJS
A Three.js and GLSL sandbox for tuning game-style skillshot visual effects, with live sliders that stay editable while the simulation is paused.
- Stars
- 1,015
- Forks
- 202
- Open issues
- 9
- Last commit
- 27 days ago
What is it?
Elemental Sandbox is a browser-based VFX sandbox built with Three.js, Vite and hand-written GLSL. It demonstrates six League-of-Legends-style abilities: four line casts aimed with an arrow on the ground, and two far casts aimed with a targeting circle. Each ability is built from procedural geometry, signed-distance shaders and GPU particles, with no textures or sprite sheets beyond the character model and its colour map.
The project's central idea is that every parameter is a live slider (938 in total) that keeps working while the simulation is paused. Settings are a single shared object that shaders, particle systems and lights read every frame, so a frozen eruption or strike can be reshaped against a still image. A built-in editor (toggled with G) also supports saving, exporting and importing presets.
The code is organised as an ability base class with pooling, an aim controller, a render pipeline with depth prepass, bloom, ACES tone mapping and grading, and a GPU particle system. An archived earlier version with fire, water, earth and air spells is kept in the repository for reference.
Key features
- 01Six abilities with line-cast and far-cast targeting modes.
- 02Procedural geometry and signed-distance shaders, with no sprite textures.
- 03938 live parameter sliders that keep updating while the simulation is paused.
- 04Preset saving, JSON export and import through a built-in editor.
- 05GPU particle system with pooled, ring-buffer slot reuse.
- 06Render pipeline with depth prepass, bloom, ACES tone mapping and colour grading.
Use cases
- Prototyping skillshot or AoE ability effects for a game in Three.js.
- Studying GLSL techniques such as SDF arrows, lightning ribbons and volumetric beams.
- Tuning particle and lighting looks interactively before committing values to code.
- Learning how to structure a real-time VFX project around a single shared settings object.
Quick start
- 1
Install dependencies
npm install - 2
Start the dev server
npm run dev - 3
Open the URL Vite prints (default http://127.0.0.1:5173)
Topics
FAQ
- What is LinearAbiltyCastingThreeJS?
- A Three.js and GLSL sandbox for tuning game-style skillshot visual effects, with live sliders that stay editable while the simulation is paused. Elemental Sandbox is a browser-based VFX sandbox built with Three.js, Vite and hand-written GLSL. It demonstrates six League-of-Legends-style abilities: four line casts aimed with an arrow on the ground, and two far casts aimed with a targeting circle. Each ability is built from procedural geometry, signed-distance shaders and GPU particles, with no textures or sprite sheets beyond the character model and its colour map.
- Is LinearAbiltyCastingThreeJS free to use? What license does it have?
- LinearAbiltyCastingThreeJS is open source under the MIT license. Check the license terms before using it in commercial products.
- Is LinearAbiltyCastingThreeJS still maintained?
- Actively maintained. The last commit to LinearAbiltyCastingThreeJS was on Sep 23, 2026.
- What can I use LinearAbiltyCastingThreeJS for?
- Prototyping skillshot or AoE ability effects for a game in Three.js. Studying GLSL techniques such as SDF arrows, lightning ribbons and volumetric beams. Tuning particle and lighting looks interactively before committing values to code. Learning how to structure a real-time VFX project around a single shared settings object.
- How do I install LinearAbiltyCastingThreeJS?
- Install dependencies: npm install Start the dev server: npm run dev Open the URL Vite prints (default http://127.0.0.1:5173)
- Where can I get LinearAbiltyCastingThreeJS?
- The source code and installation instructions are on GitHub: https://github.com/achrefelouafi/LinearAbiltyCastingThreeJS
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
An Agent Skill that lets Codex, Claude Code or Cursor generate an orbitable Three.js architecture scene that assembles itself brick by brick.
GPU.js transpiles simple JavaScript functions into GPU shader code so they run on the GPU in browsers and Node.js, falling back to plain JavaScript.
A pack of nine Codex and Claude Code agent skills for building playable, polished Three.js browser games, with a director skill that routes the work.
A collection of ready-made React helper components and hooks for building 3D scenes with react-three-fiber.
A browser-based 3D boat journey down a Japanese river valley, rendered live with three.js across four seasons and any hour of the day.