ai21.net
言語

プラグインもアプリも不要、HTML ファイル 1 枚だけで Three.… を動かす

プラグインもアプリも不要、HTML ファイル 1 枚だけで Three.… を動かす — 1

プロンプト

No plugins, no app, just a single HTML file running Three.js on WebGPU.

It's an interactive 3D house that builds itself in five stages: Foundation → Skeleton → Systems → Envelope → Finished. Every part has its own window on the timeline, so you can scrub through the construction like a video.

What's inside:
→ X-ray mode that makes the structure transparent and shows the water, power, sewage and airflow routes, with filters for each system
→ Explode, to pull the layers apart
→ Cut, a section plane that slices through the building
→ Dusk, a lighting switch to see it at night
→ Instanced vegetation, so a dozen olive trees cost almost nothing to render
→ Callouts and preset cameras for each stage

The subject is a traditional hillside villa, but the format works for any building. A developer could show a buyer exactly what's behind the walls before a single wall exists.

日本語訳

プラグインもアプリも不要、WebGPU 上で Three.js を動かす HTML ファイル 1 枚だけ。

5 つの段階で自ら建ち上がるインタラクティブな 3D の家:基礎 → 骨組み → 設備 → 外皮 → 完成。すべての部品がタイムライン上に自分のウィンドウを持つので、動画のように施工の全行程をスクラブできる。

中身は:
→ 構造を透明にして水・電力・下水・気流のルートを表示する X線モード。システムごとのフィルター付き
→ 爆発表示、レイヤーを引き離すもの
→ カット、建物を輪切りにする断面平面
→ 夕景、夜の姿を見るための照明切り替え
→ インスタンス化された植栽で、オリーブの木が十数本あってもレンダリングはほぼ無コスト
→ 各段階のコールアウトとプリセットカメラ

題材は伝統的な丘の上のヴィラだが、この形式はどんな建物にも使える。壁が 1 枚も存在する前に、開発者は買い手に壁の裏側を正確に見せることができる。

出典

原作者
MrKindey
公開日
2026-10-07(由推文 ID 反解)
原典
元の投稿を見る ↗
収録元
yihui-dev/awesome-opus5-5-videos · mrkindey-267498 · MIT