Search

threejs 불꽃놀이 만들기

subtitle
shader, particle로 불꽃놀이 만들기
Tags
threejs
자바스크립트
front-end
3D
Created
2024/12/11
2 more properties

Fireworks

https://github.com/yubrot/emitter3d?tab=readme-ov-file 더 공부해서 이런 shader도 적용하고 싶다.

사이트

Sky

code

Sky Properties

BaseParticleMesh

code

getPointMesh

Update

SeedParticleMesh

code

Update

TrailParticleMesh

잔상 파티클 역시 시드랑 거의 비슷한데, Trail은 속도에 따라 알파값이 줄어드는 로직(decrementByVel)이 없다.

BasicFireWork

동작 과정 설명

동작 과정 요약

초기화: getSeedMesh를 통해 시드 메쉬를 생성하고, 초기 위치와 속도를 설정한다.
상승: update 메서드에서 중력과 마찰을 적용하며, 시드 메쉬가 위로 상승한다(isExplode가 false일 때).
꼬리 생성: drawTail 메서드에서 파티클의 꼬리를 그리고, 상승 속도가 멈추면 폭발을 시작한다. (drawTail 안에서 explode 호출 → isExplode를 true로 설정)
폭발: explode 메서드를 통해 꽃 형태의 파티클을 생성하며, 시드 메쉬를 대체한다.
수명 감소: 꽃 형태의 파티클은 life가 줄어들면서 점차 사라진다.

RichFireWork

TrailParticleMesh를 추가해 불꽃 파티클에 잔상이 남게 한다.

동작 설명

References