GRAVITY

000%

collecting stardust

A three.js study / 01

GRAVITY

星屑が、重力で形を得るまで。

8万の粒子が、スクロールに合わせて銀河になり、惑星になり、やがて特異点へ落ちていく。

Scroll to fall

02 — Stardust

Stardust

はじまりは、ただの塵。

宇宙を漂う無数の粒子は、まだ何の形も持たない。カーソルを動かすと、その一点に小さな重力場が生まれ、塵が引き寄せられていく。

  • BufferGeometry
  • Points
  • AdditiveBlending
  • 80,000 particles

03 — Galaxy

Galaxy

回転が、秩序を生む。

引き寄せ合った塵は円盤になり、渦を巻く腕をもつ銀河へ。8万の粒子それぞれの位置は、すべて GPU 上で補間されている。

  • ShaderMaterial
  • Vertex morphing
  • Staggered easing

04 — Nebula

Nebula

ほどけて、また集まる。

銀河の腕はほどけ、ガスの雲となって漂う。ブルームが光を滲ませ、粒子の重なりが星雲の濃淡をつくる。

  • EffectComposer
  • UnrealBloomPass
  • Gaussian clusters

05 — Planet

Planet

重力は、球をえらぶ。

すべての方向から等しく引かれた物質は、やがて球になる。表面はシンプレックスノイズで脈打ち、ドラッグで回すことができる。

  • IcosahedronGeometry
  • Simplex noise
  • Fresnel rim

Drag to rotate

06 — Orbit

Orbit

落ち続けることを、軌道と呼ぶ。

惑星に捕らえられた粒子は環になり、衛星は永遠に落下し続ける。カメラもまた、その周りを巡る。

  • Lenis
  • GSAP ticker
  • Keyframed camera

07 — Singularity

Singularity

光さえ、逃げられない。

重力が極まったとき、すべては一点へ。降着円盤が灼熱に輝き、両極からジェットが噴き出す。

  • Accretion disk
  • Differential rotation
  • Polar jets

08 — Afterglow

Afterglow

そして、また星屑へ。

崩壊の果てに散った粒子は、次の宇宙の塵になる。

Built with three.js · GSAP · Lenis