Three.js / Astroで多層世界の3Dアドベンチャーゲーム基盤を1日で制作(VRM / データ駆動)

Опубликовано: 31 Май 2026
на канале: lain
11
like

Astro + Three.js(React Three Fiber)を使って、Webブラウザ上で3D RPG/アドベンチャーゲームの基盤を、ほぼ1日で作成した開発記録・デモ動画です。

【実装プロトコル一覧】
・JSON(データ駆動)による複数ステージ、ワープポイント、NPCの完全支配
・ステージ遷移に伴うBGMの動的掛け替えシーケンス
・シネマティックな3D暗転フェード
・VRMアニメーションの骨格ハック&NPC吹き出しUI(深度テストバイパス)
・高低差のある坂道や狭い階段にピタッと吸い付く動的高高度レイキャストセンサー

かつて制作したSTGのソースコードやロジックといった過去の資産も流用・拡張しながら、データ駆動で3D多層世界を編み上げています。


■ Credits
・3D Model (Stages)

author: Katydid
https://sketchfab.com/3d-models/two-b...

author: Nioma van der Steen
https://sketchfab.com/3d-models/assis...

author: Katydid
https://sketchfab.com/3d-models/briti...

author: Katydid
https://sketchfab.com/3d-models/silen...

author: alban (STG)
https://sketchfab.com/alban

・3D Model (Characters & Costumes)

Cat ear hairstyle / OR01 (Creator: 桜田とまこ)
https://hub.vroid.com/characters/8541...

レイチェルちゃん (Creator: マユラ)
https://hub.vroid.com/characters/8278...

Bunya (Creator: TamanoXCross)
https://hub.vroid.com/characters/6167...

Chen Qianyu (Creator: T-T)
https://hub.vroid.com/characters/8019...

Auralithis (Creator: JustAPal)
https://hub.vroid.com/characters/7336...

SATORI (BOOTH - 衣装と舞台)
https://official-satori.booth.pm/

おしり服屋さん (BOOTH - 衣装)
https://oshiri-chan.booth.pm/

minipper (BOOTH - 衣装)
https://minippa.booth.pm/

第703工房 (BOOTH - 衣装)
https://t703vr.booth.pm/

siroihakumai (BOOTH - 衣装)
https://siroihakumai.booth.pm/

[ Audio ]

BGM:Yuli Audio Craft
https://yacft.com/

効果音:効果音ラボ
https://soundeffect-lab.info/

#Threejs #r3f #Webデベロッパー #個人開発 #VRM


■ Legal Notice
The world-building (Navi / Copland OS) and certain design elements of this site are constructed as a non-profit, experimental implementation in compliance with the "serial experiments lain" secondary creation guidelines [lain 20th Anniversary Twitter Theme (lainTTL) Guidelines].
https://www.nbcuni.co.jp/rondorobe/an...