写真を3Dボクセル化する波アニメ付きThree.jsスタジオ

Claude Fable 5.1の協力で、ポートレートを1万個超のインスタンス3D図形に変換するThree.jsツールを制作。波操作とGIF/PNG出力付きです。

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

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

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

Wandy3Dによる制作ブリーフ

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

Build a browser tool in Three.js that turns an uploaded photo into an interactive field of more than ten thousand 3D pixels. Sample the image on a grid and render each cell as an instanced sphere, cube or cylinder coloured from the photo, so the whole field costs a single draw call and stays near 60 FPS. Add a dark background and a compact control panel with an image upload, a shape selector, a material theme selector (original colours, metallic, neon), sliders for grid resolution, wave amplitude, wave speed and depth extrusion, an auto-rotate toggle, and buttons to export an animated GIF and a high-resolution PNG. Animate the voxels with a travelling 3D wave displacement and allow orbiting and zooming close to see individual shapes. Done means any portrait can be dropped in and explored live.

このプロンプトの使い方

  1. コーディングツールでClaude Fable 5.1にビルドブリーフを渡し、Three.jsプロジェクトを依頼します。

  2. 図形、マテリアルテーマ、グリッド密度、波の挙動を調整したり、独自のシェーダー表現を加えます。

  3. 写真をアップロードしてスライダーを調整し、出力機能の追加や軽量化も依頼します。

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