シティ・パルス
2025年1月のニューヨーク市におけるイエロータクシーの動きをインタラクティブに読み解く3Dモビリティアトラス。3Dマップ、時間帯ごとの動きの再生、ゾーンの詳細表示、平日・週末の平均との比較に対応します。
インタラクティブ
インタラクティブ 3D のプロンプトとサイト作例
3D ポートフォリオ、商品体験、インタラクティブな実験を探索しましょう。気に入った操作体験に、自分の題材やスタイルを取り入れられます。
試してみたい 3D プロンプトの作例
自分の作品に生かせる 61 のアイデア
インタラクティブなファンタジーグラフィックスデモ
等角投影カメラ、操作可能なキャラクター、反射する濡れた床、環境の動きを備えた、ブラウザ上のThree.jsファンタジーシーン向けDream Loop Plusプロンプト。作者はGPT-5.6 Luna xhighを使ったデモ用プロンプトと位置づけており、投稿では最適化されたフローでAstraがビジュアル制作を担うと説明しています。
インタラクティブ3D粒子衝突型加速器
Three.jsを使い、CERNのLHCとATLAS検出器に着想を得たインタラクティブな3D粒子衝突型加速器を、自己完結型のHTMLファイル1つで構築するための、作者による推奨開始プロンプトです。紹介されている結果に実際に使われた入力そのものではなく、同様のものを作るためのプロンプトとして提示されています。
没入感のある3D田園風景サイト
自然な風のアニメーション、ライティングとカメラモード、レスポンシブ操作、プロシージャルな植生、リアルタイム描画に対応した、ブラウザで動作するThree.js製3D田園風景を作成するプロンプト。
北京・天壇祈年殿 TypeScript + Three.js WebGLプロジェクト
GPT-6 Astra と Three.js を使って制作した北京・天壇祈年殿の3DモデルとWebページの表現を紹介する投稿です。作者は後日、この種のプロジェクトを作成するための完全な中国語プロンプトも公開しています。
インタラクティブなゼリー状レモンの木
枝が揺れ、マウスでレモンをつかめる、スクイッシュ＆バウンス物理演算に対応したインタラクティブな3Dゼリー状レモンの木をWebGPUで作成します。
作業台の上のインタラクティブなロボットペット
表情豊かな動き、見えるバッテリーセル、充電、オブジェクトを使った3種類の仕事を備えた、四足歩行ロボットのThree.jsゲーム仕様書。
Three.js WebGPUで作る無限ミニチュアストリート
配達用自転車、ショップ、濡れた路面の表現、散らばる落ち葉、緩やかに湾曲した世界、ピクセルアート調のビジュアル、調整可能なForgeパラメータを備えた、インタラクティブなミニチュアの街並みを作成します。
インタラクティブなスマートフォン分解図
分解・再組立スライダー、選択可能なコンポーネント、各パーツの機能解説を備えた3Dスマートフォンビジュアライゼーションを構築します。
デスクトップPCの分解図鑑
デスクトップPCを29個の主要部品に分解して見られる、インタラクティブな3Dサイトを制作してください。分解アニメーションと各部品の解説を追加してください。
操作して探索できるソウルのミニチュア
オープンな地図データを使い、Three.jsでソウルのミニチュアを制作してください。地区の選択、名所を巡るフライスルー、昼夜モード、タッチ操作を追加してください。建物を簡略化した箇所、推定した高さ、データのライセンスを明示してください。
二重リングのエネルギーコアを操作する3Dビューアー
Blenderでエネルギーコア、2つのリング、金属製の台座をモデリングしてください。マテリアルを含めてThree.jsのビューアーに書き出し、回転、ズーム、自動周回、脈動の操作を実装してください。
自分の部屋をインタラクティブなポートフォリオに
自分の部屋を、操作して楽しめる自己紹介サイトにしてください。Blenderでシーンを制作してベイクし、コーヒーの湯気、Matrix風のアニメーション、控えめなシェーダーエフェクトを追加してください。
D4に着想を得た、歩き回れるアパート
D4の主人公のアパートについて調べ、プレイ可能な3D試作として再現してください。完全に再現できたと決めつけず、間取りやインタラクションを資料と照らし合わせて確認してください。
音声同期アニメーション対応の操作可能な3Dアンサンブル
Astraは、オリジナルの短編作品と、音声連動アニメーション、シーク、スローモーション、カメラ操作、MIDI、ソースコードに対応した操作可能な3Dアンサンブルの制作を依頼されました。
軌道をたどる太陽系エクスプローラー
8つの惑星と20の衛星を備えた、ブラウザー向け太陽系エクスプローラーをThree.jsで制作してください。カメラ移動と、簡略化した宇宙飛行計画の操作を可能にしてください。
生物発光が彩る深海のランディングページ
Three.jsの水表現、暗いガラス風のインターフェース、スクロールに連動する動きを使い、深海をテーマにしたランディングページを制作してください。3Dの雰囲気と、わかりやすく画面サイズに対応したサイト操作を両立してください。
操作できる Hyperloop デモ
輸送ポッド、チューブ設備、システム内の移動を見せる、操作可能な Three.js Hyperloop デモを作成してください。
スクロールで動く 3D スタジオサイト
提示された参考画像を Three.js シーンにし、滑らかなスクロール連動のスタジオサイトに組み込んでください。カメラ移動、文字組み、セクション遷移を連動させてください。
屈折するボトルで伝える商品ストーリー
フォトリアルな WebGL ガラスボトルを中心に、インタラクティブな商品サイトを作成してください。ブラウザ性能を保ちつつ、光を屈折させる液体、スクロール連動の回転、大胆な文字組みを用いてください。
思い出のカプセルマシン
3D の思い出カプセルマシンを作成してください。つまみを回すと思い出が出てきます。機構を Blender でモデル化し、落ちるカプセルに自然な動きと音を付けてください。
アニメーションで使い方を伝えるジオラマ
Blender で小さな導入説明用ジオラマを作り、Three.js で動かしてください。注目対象を明確にし、短いアニメーションで最初の操作を説明してください。
分解して観察する 3D 人体解剖
人体が、個別に観察できる構造へ分かれる 3D 解剖学サイトを作成してください。分解表示を操作できるようにし、各部位を意味のある器官系に整理してください。
自転車に乗るインタラクティブなペリカン
ミントグリーンの自転車に乗って自然にペダルをこぐペリカンを、ブラウザ上で動作する3Dモデルとして作成します。オービット操作、ズーム、速度調整に対応させます。
プロンプトを自分らしくアレンジ
訪問者がクリック、ドラッグ、変更できるものと、その結果を説明します。最初の操作を分かりやすくし、マウスだけでなくタッチ操作も指定しましょう。
見て、読んで、作る
作例で使われているテクニックを学びましょう。
