01
作りたいものを伝える
参照画像に忠実な結果が必要なら Native Mesh を選び、コードで編集したい場合にだけ Editable Draft を明示的に選んでください。コンバーターは1つ、選択も1つです。
img2threejs / ウェブサイトに載せられる 3D
1枚の画像から サイトに載せられる Three.js コンポーネントへ。
img2threejs は画像 1枚を、そのまま本番サイトで使える Three.js コンポーネントに変えます。img2threejs が生成する GLB、比較して選べる Native Mesh 候補、LOD、調整済みカメラとライト、名前付きアンカーを含む materials.json、React Three Fiber / vanilla ローダー、実測のパフォーマンス予算までを1つのパッケージでお届けします。
native_mesh / website componentドラッグして確認
生成 GLB / 最適化パッケージ
まずは画像 1枚から
img2threejs コンバーター · image to Three.js
コンセプトから Native Mesh へ
Before: コンセプトアート。After: インタラクティブなコンポーネント。
6つのコンセプトデザインを生成し、すべてのお客様が使うのと同じパイプラインで Native Mesh に再構築しました。各カードはコンセプトアートと生成されたターンテーブルを並べています。開くと実際の GLB を回して確認できます。
品質ゲート付きの再構成パイプライン
img2threejs が見た目を構造へ変えていく仕組み
画像から3Dを作る処理は、魔法のような一発変換ではありません。現在 img2threejs が提供するのは2つの動くルートです。Native Mesh が標準で、Web 用小物向けに比較できる候補と LOD を返します。コードで編集したい場合だけ Editable Procedural Draft を選べます。どちらのルートも、最終的には同じ納品物、つまり Web サイトが読み込んでスタイルを当て、保守できるコンポーネントパッケージになります。
native_mesh.pipeline / コンセプト → コンポーネントNative Mesh ルート
01 / 画像 1枚3候補なら 4〜6 ビュー
02 / Native Mesh 候補3 候補 · 自分で選択
03 / サイトに載せられるパッケージGLB / R3F / vanilla / README
/model.glb + LODs
/Model.tsx
/ModelVanilla.ts
/materials.json
/preview image
/README.md
実測のパフォーマンス予算つき
02
必要なビューをアップロードする
標準 Native Mesh は正面の写真1枚で動きます。高品質モードでは、あなた自身の正面・背面と、左・右・上・側面から2〜4枚を追加します。ビューは常にあなたの写真から得られ、AI が推測で補うことはありません。
03
サイトに載せられるコンポーネントを受け取る
model.glb、Model.tsx、ModelVanilla.ts、materials.json、レンダリング済みプレビュー、README.md を1つの zip でダウンロード。スケールとピボットの正規化、LOD、カメラとライトの調整、名前付きアンカー、実測のパフォーマンス予算が済んでいます。
Web コンポーネントパッケージ
1回のダウンロードに、本番サイトに必要なものを全部。
主な出力は、単なるメッシュではなく本番用のコンポーネントパッケージです。LOD 付きの正規化された GLB、React Three Fiber と vanilla のローダー、カメラ・ライト・マテリアル・アンカーをまとめた materials.json、そして実測のパフォーマンス予算を書いた README が含まれます。img2threejs はモデルとローダーと調整をまとめてパッケージにし、サイトにそのまま載せられる状態にします。
export function createModel()
// プロジェクトにそのまま追加
実際の出力 / 6ファイルのパッケージ
lod0 / lod1 / lod2model.glb
LOD 付きの正規化されたジオメトリ
単位スケール、底面ピボット、Meshopt 圧縮を自動で適用するため、シーンにそのまま配置できます。Web 用小物はデスクトップ / モバイルの2段階、ゲーム試作は3段階の LOD を生成します。img2threejs のパッケージャーは zip を作る前に三角形数・ドローコール・ファイルサイズを計測します。
<Model />Model.tsx
React Three Fiber コンポーネント
R3F の Canvas にそのまま置けます。LOD 切り替えは自動、マテリアルは materials.json で上書きでき、MODEL_ANCHORS から名前付きのクリック領域を参照できます。img2threejs はジオメトリ・マテリアル・アンカーを分離して書き出すため、メッシュを作り直さずに差し替えられます。
loadModel()ModelVanilla.ts
vanilla Three.js ローダー
プレーンな three.js で動く GLTFLoader + Meshopt デコード + LOD + ライト + リサイズ処理。React は不要です。img2threejs の vanilla ローダーは React コンポーネントと同じ materials.json を使い、同じカメラ・ライト・アンカー挙動を再現します。
perf.budgetmaterials.json + README
設定ファイルと実測の予算
カメラ、ライト、マテリアル、アンカー、LOD 距離を1つのファイルで調整できます。README には実測の三角形数・ドローコール・ファイルサイズと、デスクトップ / モバイル予算との比較を記録します。
Native Mesh が主役 · ドラフトは編集可能なまま
忠実度の主契約は Native Mesh。コード優先は明示的な選択です。
img2threejs では、「写真に似ている」という約束を Native Mesh が担います。実際の生成ジオメトリ、比較して選べる候補、LOD、本番用コンポーネントパッケージがその中身です。Editable Procedural Draft は、名前を変えたり、ピボットをアニメーションさせたり、バリエーションを生成したりしたいチーム向けに残しています。ただし出発点であって、忠実度の主張ではありません。img2threejs は両方の経路を1つのコンバーターにまとめ、選択を明確にします。
Draft は意図して選んでください。Git 差分、意味のあるパーツ、決定的な TypeScript が強みです。参照画像に近づけたいなら、img2threejs の Native Mesh がデフォルトです。
生成する前に根拠を集める
参照情報は通常の画像でも、三面図ボードでも、その両方でも構いません。img2threejs はシルエット、素材の手がかり、接続点、繰り返し構造、不確かな領域を記録してから作る内容を決めます。きれいに描けていても構造が間違っていれば、正しいモデルとは言えません。
大きな推測より、小さな確認を重ねる
観察、計画、モデル生成、プレビュー、書き出しを別々のチェックポイントとして見える状態にします。結果が十分でない場合も、参照画像と生成計画を確認してから次の生成に進めます。
平たい形状より、意味のあるパーツ
使いやすいオブジェクトには関係性があります。ふたはヒンジに属し、ホイールは軸を中心に回り、ツールはソケットに接続します。名前付きグループとして残すことで、アニメーション、インタラクション、衝突判定、設定変更が意味のあるパーツを直接扱えます。
理屈だけで終わらせず、ブラウザで確認する
TypeScript が正しく、寸法がもっともらしくても、写真に似ているとは限りません。実際のブラウザレンダーで確認することで、その差を埋めます。並べて比較すると、カメラや素材のずれに早く気づけ、修正の理由も具体的になります。
実際の Web ページのために
サイトに載せるコンポーネントが役に立つ場面
どちらのルートも一つの契約を保ちます。正規化されたジオメトリ、LOD、調整済みライト、名前付きアンカー、正直なパフォーマンス数値が共通です。写真、コンセプトアート、商品写真のどれから始めても、img2threejs のコンポーネントパッケージは同じように使えます。
Native Mesh で再構築したコンセプト生成された 6 コンポーネント
01
Web 用小物
img2threejs の Native Mesh は、デスクトップ / モバイルの LOD、調整済みカメラとライト、素材グループ由来の名前付きアンカーを備えた正規化済み GLB を返します。
02
コード優先のチーム
パーツの名前を変え、マテリアルをテーマ化し、ソースでアニメーションさせたいなら img2threejs の Editable Procedural Draft に切り替えてください。Git 差分と意味のあるパーツが付いてきます。
できることと限界
参照画像だけでは、すべての面を証明できません。
Native Mesh の品質は、あなたが渡したビューに比例します。標準モードは正面の写真1枚、高品質モードは正面・背面に加えて側面や上面の写真を使います。img2threejs はビューを勝手に推測することはありません。
根拠が足りないところは、img2threejs のワークフローが足りないと示します。底面、内部、隠れている側面がモデルに大きく影響するなら、別のビューを追加してください。彫刻的なトポロジーや映画制作向けのキャラクターリグが必要な場合は、従来の3Dツールで仕上げるのが現実的です。img2threejs の目的は役に立つ再構成であって、どんな入力からでも完璧に解けると約束することではありません。
img2threejs 本番パイプライン
参照画像から、サイトに載せられるコンポーネントへ。
img2threejs は本番 Web 3D のための image-to-Three.js パイプラインです。参照画像を受け取り、サイトが実際に配信できるコンポーネントを返します。
img2threejs がスケール・ピボット・向きを自動で正規化します。
img2threejs が同じ GLB からデスクトップ / モバイル用 LOD を生成します。
img2threejs が React Three Fiber と vanilla のローダーを書き出します。
img2threejs が参照画像からカメラとライトを調整します。
img2threejs が全パッケージに実測のパフォーマンス予算を記録します。
img2threejs はダウンロードまで生成結果を復元可能に保ちます。
使う前によくある質問
よくある質問
出力内容、利用できる機能、相性のよい入力画像、upstream プロジェクトとの関係についてまとめています。
01img2threejs は何を生成しますか？+
サイトにそのまま置けるコンポーネントパッケージです。LOD 付き model.glb、Model.tsx、ModelVanilla.ts、materials.json、プレビュー画像、実測のパフォーマンス予算を書いた README が含まれます。コード優先の Editable Draft は、1クレジットで TypeScript と JSON を書き出せる Three.js ドラフトを生成します。
02ホスト型コンバーターは今使えますか？+
はい。Native Mesh がメインです。標準ビルドは 3 クレジット、自分の複数ビューから3候補を作る高品質モードは 9 クレジットです。完成した候補を比較して、使うモデルを選べます。コード優先の Editable Draft は 1 クレジットからです。
03Blender や従来のモデリングツールの代わりになりますか？+
いいえ。img2threejs は、画像からブラウザにそのまま組み込める Three.js コンポーネントを作るホスト型サービスです。彫刻、手作業のトポロジー調整、映画向けキャラクター制作、アートパイプラインでの直接的なメッシュ編集には、Blender などの専用ツールのほうが向いています。
04どんな参照画像が向いていますか？+
標準 Native Mesh は、対象物全体が明るくはっきり写った正面写真1枚が最適です。高品質モードは、正面・背面に加えて左・右・上・側面のうち2〜4枚を自分で用意します。Editable Draft では、正面・側面・上面がそろった三面図ボードが最も強い形状情報になります。
05img2threejs の公式プロジェクトサイトですか？+
このサイトは、Hoài Nhớ 氏による MIT ライセンスの upstream プロジェクトをもとにした独立運営のホスト型インターフェースです。upstream リポジトリそのものではありません。出典表記とプロジェクトへの直接リンクは、関係性がわかるように表示しています。
img2threejs に、読み取る価値のある画像を渡してください。
輪郭がはっきりした hard-surface オブジェクトから始めましょう。img2threejs の Native Mesh がデフォルトでサイトに載せられるコンポーネントを作り、コード優先の Editable Draft はワンクリックで切り替えられます。
普通の写真1枚から始められます。あとはコンバーターが導いてくれます。目的に合うパイプラインを選び、実際に用意したビューをアップロードし、GLB・ローダー・マテリアル定義・プレビュー・実測のパフォーマンス予算が入ったパッケージを返します。本番ページ、プロトタイプ、ゲームビルドで、アセットを作り直さずにそのまま使えます。
