写真の上を這う虫たち:Three.jsのIK脚とカーソル操作デモ

GPT-6 Astraが、六本脚の虫がポートレート上を歩くブラウザデモを生成。接地点の表示、数の調整、追尾や回避モードを備える。

デモソースコード

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 web demo in Three.js where many small beetles crawl across the surface of a portrait photo. Each beetle has a glossy red body and six thin legs. Legs move in two alternating groups: one group stays planted while the other lifts and steps to a new target, with two-segment inverse kinematics placing each foot. Beetles sample the photo's height or contour so their bodies follow the curved surface and tilt with it. Use a dark green background and a clean card-style interface in a modern typeface. Add a toggle that shows foot landing points, a slider for beetle count and walking speed, a pause button, and a mouse mode switch between wandering, chasing the cursor and fleeing from it. Include short explanatory panels about the gait and leg solving. Deliver it as a static page that can be hosted on GitHub Pages. Done when dozens of beetles walk smoothly without legs jumping.

このプロンプトの使い方

  1. コーディングツールのGPT-6 Astraにビルドブリーフを貼り、静的なThree.jsページを依頼します。

  2. 写真、生き物の形、色、脚の数、歩行パターンを差し替え、数と速度の範囲も調整します。

  3. ローカルかGitHub Pagesで開き、歩幅の滑らかさやマウス挙動、別の表面への対応を追加で依頼します。

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