three.js 스킬 이펙트 샌드박스 Elemental Sandbox 도입 조건

8/10/2026 ·impact

three.js 스킬 이펙트를 마우스로 겨누고 슬라이더로 다듬는 샌드박스 Elemental Sandbox 가 MIT 라이선스로 올라와 있습니다. 파라미터 938개가 P 로 멈춘 화면에서도 계속 적용돼서, 분출 한가운데를 얼려 놓고 색과 실루엣을 고칩니다.

옮겨 심을 때 걸리는 것은 이펙트가 아니라 바닥입니다. 지면이 y = 0 평면이라는 전제가 조준 레이캐스트와 지오메트리 양쪽에 박혀 있습니다.

키로 겨누고 클릭으로 쏘는 스킬 여섯 개입니다

키를 눌러 장전하면 바닥에 조준 화살표가 뜨고, 마우스로 각도를 잡은 뒤 왼쪽 클릭으로 나갑니다. Q 프로스트 랜스, E 스톰 랜스, R 신더 폴, F 노바 빔이 직선 캐스트고, V 볼테익 스네어는 커서를 따라다니는 원으로 자리를 잡습니다.

여섯 번째는 조작표에 없습니다. settings.js 의 ELEMENTS 배열은 ice, thunder, meteor, beam, snare, glacier 여섯 개고, ELEMENT_META 에서 여섯 번째 Glacial Crown 이 키 X 를 갖습니다. InputManager.js 도 KeyX 와 Digit6 을 여섯 번째 슬롯에 물려 뒀습니다. README 조작표만 세면 하나를 놓칩니다.

원형 지정도 하나가 아닙니다. 스네어와 글레이셜

크라운 둘 다 cast: CastShape.ZONE 으로 등록돼 있고, 화살표 대신 원이 커서를 따라옵니다. 일부러 두껍게 그린 경계선이 이게 바닥을 얼마나 차지하나에 답하는 자리입니다.

나머지 키는 짧습니다. G 로 에디터, P 로 일시정지, C 로 활성 효과 제거, H 로 조작 패널 숨김, Esc 나 우클릭으로 장전 취소, 우클릭 드래그로 카메라 궤도. range 와 minRange 는 능력마다 달라서, 고른 능력의 minRange 보다 가까이 조준하면 표시가 붉어지며 시전을 거부합니다. 스네어는 minRange 가 0 이라 제자리에 깔립니다.

멈춘 채로 고치는 것이 이 프로젝트의 요점입니다

슬라이더 938개가 일시정지 중에도 그대로 먹습니다. P 로 분출 도중이나 타격 순간의 한 프레임을 얼려 두고, 정지 화면에 대고 색과 실루엣과 타이밍을 고치는 방식입니다. 저자는 README 에서 이 동작을 프로젝트의 요점이라고 부릅니다.

이 방식이 다른 이유는 VFX 가 움직이는 동안에는 판단이 안 서기 때문입니다. 0.2초짜리 섬광의 색은 재생 중에 눈으로 비교할 수 없고, 되감아 다시 보는 사이 앞 값의 기억이 흐려집니다. 같은 프레임을 붙잡아 둔 채 값만 바꾸면 두 후보가 한자리에서 겹쳐 보입니다.

에디터 폴더는 Presets, Global, 조준 표시, 원형 캐스트, 능력별, Environment, Post processing, Camera, Character 로 나뉘고 전부 접힌 채 시작합니다. 능력 하나가 100개대에서 176개까지 컨트롤을 갖습니다. 새 능력을 붙이는 경로는 다섯 단계 — settings 블록과 ELEMENTS/ELEMENT_META 등록, Ability 상속 후 훅 구현, AbilityManager 등록, 에디터 폴더와 문양 추가, 키 바인딩입니다. 원형 캐스트로 만들 때는 cast: CastShape.ZONE 과 zoneRadius 두 줄이면 조준 루프 전체가 따라옵니다.

띄우는 절차는 README 에 적힌 그대로입니다. 아래 두 줄은 문서에서 옮긴 것이고 실행 출력이 아닙니다.

npm install
npm run dev
# Vite 기본 주소: http://127.0.0.1:5173

의존성은 three 와 lil-gui 둘뿐이고 번들러는 Vite 입니다(package.json). 배포된 데모 주소도 릴리스도 없어서, 화면을 보려면 이 두 줄을 직접 돌리는 것 말고는 경로가 없습니다.

이펙트는 코드로 나오지만 캐릭터와 배경은 파일입니다

이펙트 쪽은 실제로 코드에서 나옵니다. 얼음 결정은 절차적 지오메트리, 번개는 정점 셰이더가 통째로 배치하는 리본 스트립, 운석은 CPU 에서 균열면으로 잘라낸 아이코스피어, 빔은 반지름 셋으로 세 번 그리는 파라메트릭 튜브입니다. 파티클 실루엣에도 스프라이트 시트가 없습니다.

디스크에서 읽는 바이너리는 여섯 개입니다. Idle.fbx 가 리그와 아이들 클립, diffuse.png 가 캐릭터 컬러맵, cast1.fbx·cast2.fbx·cast3.fbx 가 시전 애니메이션, spruit_sunrise.hdr 가 IBL 과 결정 반사를 맡습니다. FBX 넷은 같은 리그의 Mixamo 익스포트고, 클립이 뼈 이름으로 바인딩되기 때문에 다른 파일에서 만든 애니메이션이 리타게팅 없이 재생됩니다.

표에 없는 파일도 있습니다. public/textures/cathedral/ 에 ao·color·normal·roughness 넉 장이 들어 있고, Ground.js 가 이 넷을 바닥 머티리얼에 붙입니다. 캐릭터를 빼면 디스크에 텍스처도 스프라이트 시트도 메시도 없다는 설명은 이펙트에 한정하면 맞고, 무대까지 포함하면 아닙니다. 이펙트만 떼어 갈 사람에게는 오히려 유리한 구조입니다. 남는 바이너리 의존이 캐릭터 쪽뿐이니까요.

절차적으로 그린 값은 드로콜에서 돌아옵니다. 결정 필드 전체가 결정 개수와 무관하게 3회(상한 288개), 번개 하나가 필라멘트 수와 무관하게 2회(상한 24가닥), 빔 하나가 6회입니다. 저자가 기본 시전으로 측정한 수치입니다. src/archive/ 에 4원소를 자유 곡선으로 그려 시전하던 이전 버전이 남아 있지만, 라이브 앱이 임포트하지 않아 Vite 번들에는 들어가지 않습니다.

바닥이 평면이라는 전제가 두 번 박혀 있습니다

게임에 옮길 때 먼저 걸리는 것은 지형입니다. 바닥은 y = 0 짜리 단일 평면이고, 조준 레이캐스트도 그 평면을 노립니다. 평평한 바닥은 실수가 아니라 선택입니다. Ground.js 는 조준과 모든 능력이 평면을 가정한다는 이유로 바닥을 그렇게 유지합니다.

원형 캐스트는 같은 전제를 두 번 물려받습니다. 원은 y = 0 의 단일 쿼드로 그리고, 스네어의 촉수와 림 아크도 그 평면에 놓입니다. 계단 위로는 덮이지 않습니다. 높이 차가 있는 맵에 넣으려면 조준 레이캐스트를 지형 콜라이더 쪽으로 돌리고, 바닥 표시를 평면 쿼드가 아니라 투영 데칼로 다시 짜는 작업이 따라옵니다.

바닥 표시에는 문제가 하나 더 붙어 있습니다. 조준원과 스네어의 장판이 가산 혼합이라 바닥을 어둡게 깔지 않고 밝힙니다. 밝은 바닥에서는 경계가 읽히지 않아 밑에 비가산 패스를 따로 깔아야 합니다. 결정은 transparent: true 에 depthWrite: true 라, 불투명도를 낮추면 겹친 가시들 사이에서 정렬 아티팩트가 드러납니다. 여기까지는 저자가 Known rough edges 에 스스로 적어 둔 목록입니다.

동시 시전 상한도 이미 정해져 있습니다. 능력·데칼·버스트·파티클이 종류별로 풀링돼서 열두 번 연속 시전해도 능력 인스턴스는 최대 넷입니다. 동적 포인트 라이트는 여섯 개뿐이고 빔 하나가 그중 둘, 기둥과 시전자의 손을 씁니다. 빔 넷이 동시에 서면 풀이 바닥나 LightPool.acquire() 가 null 을 돌려줍니다.

코드는 MIT, 캐릭터와 HDRI 는 아닙니다

저장소의 LICENSE 파일은 MIT 입니다. Copyright (c) 2026 mohamedachrefelouafi 로 적혀 있고 GitHub 도 MIT 로 인식합니다. 그런데 README 의 Licence 절이 범위를 한 번 더 좁힙니다. 번들된 HDR 프로브와 캐릭터 FBX 는 각자의 원래 라이선스를 유지합니다.

라이선스 파일 하나만 보고 통째로 가져가면 안 되는 이유가 여기 있습니다. 셰이더와 시스템 코드는 MIT 조건으로 쓸 수 있지만, Idle.fbx 와 cast1~cast3, spruit_sunrise.hdr 는 이 저장소가 권리를 주는 대상이 아닙니다. 게임에 그대로 실어 배포할 계획이라면 Mixamo 익스포트의 약관과 HDRI 원 출처를 각각 확인하는 절차가 따로 남습니다.

바닥에 붙는 텍스처 넉 장은 어느 쪽에도 이름이 없습니다. README 의 자산 표에도, Licence 절에도 나오지 않습니다. 실제로 화면에 그려지는 파일이니, 이펙트만 떼어 갈 게 아니라면 이것도 출처를 따로 물어봐야 할 항목입니다.

npm run dev 로 띄워 보고 결정합니다

이펙트 구현을 참고할 목적이면 지금 상태로 쓸모가 있고, 게임에 통째로 옮길 목적이면 지형 전제와 자산 라이선스가 먼저 걸립니다. 드로콜과 파티클 수치는 저자 측정치라 이 글에서 기기로 재현하지는 않았습니다.

2026년 8월 6일에 만들어져 8월 9일에 마지막으로 푸시된 저장소라 구조가 더 움직일 여지가 있습니다. 바닥 텍스처의 출처와 이후 변경은 저장소에서 직접 보는 편이 빠릅니다. 받아서 띄운 다음, 조작표에 없는 X 키부터 눌러 보세요.

Elemental Sandbox 저장소 열기