Interactive cyberpunk lower-city 3D sandbox in Three.js

Prompt

The author shared the full prompt.

Three.jsで、斜め上から見下ろす「箱庭」の3Dを作ってください。
題材：雨の夜の、水没したサイバーパンクの下層街
・画像や3Dモデルは使わず、建物も看板も人も全部コードで作る
・建物はぎっしり。窓・室外機・配管・ネオン看板で壁を埋めて、何もない面を残さない
・霧の中で灯りがにじむように。ピントの外の光は丸くボケるように
・人が歩く、車が走る、湯気が上がる、雨が降る。画面のどこかで常に何かが動いている
・全景・路地・屋上など、視点を5〜7か所切り替えられるボタン
・ブラウザで開くだけで動くページにする
・できたら各視点のスクショを撮って、自分で見て直してから見せて

題材の例：夕暮れの港町／昭和の屋台街／雪の温泉街／空に浮かぶ島の村

■② 開いて見て、気になる所を言葉で伝える
・「全体が暗い」「もっとごちゃごちゃに」「看板の文字を日本語に」
・「このカメラは建物の中に入ってる」「ロボットを別のデザインに」
1〜2個ずつ、具体的に言うのが早道です。

■③ 遊び方を足す
・「天気を切り替えるボタンを付けて（雨・霧・停電・夜明け）」
・「住人を1人選んで、後ろから追いかけるカメラを付けて」
・「ドローンで街の中を飛ぶ視点」「列車に乗って眺める視点」
・「全画面ボタンを付けて」

■④ 公開する
「公開して」と頼むと、リンクで見せられるページにしてくれます。

■コツ
・1回で完成を狙わない。「見る→言う→直す」を何回か回すのがいちばんの近道
・重くなったら「fpsを測って、60fps出るように軽くして」

Category

3D scenes

Stack

Three.js

Made with

Three.js

From the author

Browser-interactable; author says to iterate by viewing and revising.

On X

800 likes · 143K views · 774 saves