スライダーで分解できるスマートフォンのインタラクティブ3D分解図

GPT-6 Astraが、スライダーでスマホを層ごとに分解し、部品をクリックすると説明が出るWebページを作成した。

Claude Code + Three.js(コードのみ)Wandy 2
実際のモデル · 360°どちらも同じ写真から作成:左は Claude Code(Opus 5.5)が Three.js のコードでモデリングした、手を加えていない1回分の実行結果。右は Wandy 2。

精細な3Dモデルを作ろう

コードだけでは単純な形しか作れません。Wandy 2なら写真1枚から、同じシーンで使えるテクスチャ付き3Dモデルを作れます。

GPT-6 Astraのプロンプト

Build an interactive 3D exploded-view visualization of a modern smartphone. Separate the device into its major components and let me explode/reassemble it with a slider. Clicking a component should isolate it and explain what it does. Include the battery, cameras, SoC, memory, display layers, speakers, sensors, antennas and logic board. Prioritize a beautiful Apple-like interface and satisfying interactions. Build, run, inspect and fix the complete experience.

このプロンプトの使い方

  1. コーディングエージェントでGPT-6 Astraにプロンプトを貼り付け、ページを作らせます。

  2. 対象を腕時計やドローンなどに変え、部品リストやUIの雰囲気を調整します。

  3. スライダー付きの3D分解図が完成します。ラベルやカメラ、分解の動きを改善できます。

元の投稿作者の方ですか? このページの修正・削除をご依頼ください