デスクトップPCの29パーツを分解して学べるインタラクティブ3D

GPT-6 Astraが作った学習用3Dサイト。スライダーでPCが分解され、29個のパーツをクリックすると解説が表示されます。

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

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

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

Wandy3Dによる制作ブリーフ

作者がプロンプトを公開していないため、この作品を再現する方法を私たちがまとめました。

Build an interactive 3D educational website that explains the parts of a desktop computer. Show a PC tower with a dark studio background and a clean light-on-dark interface. Use Three.js. Model about 29 core components (motherboard, CPU with cooler, GPU, RAM, SSD, power supply, fans, case panels) as separate meshes. Add a left sidebar listing components grouped by category with search, and a right panel that shows a name, short description and related parts for the selected component. Clicking a part in the list or the scene highlights it and focuses the camera on it. Provide an explode slider at the bottom that smoothly pulls every part away from the case along sensible axes and brings them back, plus orbit, zoom and reset controls. Add small animated labels for the selected part. Deliver a self-contained web project that runs locally. Done when every listed part can be selected, explained and separated in the exploded view without overlap glitches.

このプロンプトの使い方

  1. コーディングエージェントでGPT-6 Astraにビルドブリーフを渡し、Three.jsで動くプロジェクトを依頼します。

  2. 題材を自転車やエンジン、カメラに変え、パーツ一覧と説明文を書き換えます。

  3. 分解スライダーを動かして確認し、アニメーションやクイズ、言語切替の追加を依頼します。

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