色・刻印を選ぶと、3D と価格が変わる商品ページ部品

向いている方

• Web 制作会社・フリーランスの方。お客さまの商品ページに組み込んで納品できます（複数人で使うときは制作会社用のライセンスをお選びください）
• 名入れのギフト・オーダー家具・工房の品など、色や素材の組み合わせが多い商品を自社のサイトで売っている方
• 社内に Web の担当の方がいて、サイトにファイルを置き、商品ページに数行を貼れる方
• 月額のサービスを増やさず、買い切りで置きたい方

向いていない方

• 3D モデル（.glb）が無く、ご自身でも用意しない方（モデルの制作は含みません。用意から頼みたい方は、別にお見積もりします）
• AR（スマホのカメラで部屋に置いて見る機能）や、選択肢を画面で直す管理画面が要る方（どちらもありません。選択肢は設定の JSON に書きます）
• Shopify のストアに置いて、選んだ内容を注文に残したい方（Shopify 版をお選びください）
• ページに JavaScript のファイルを置けないネットショップのサービスをお使いの方（置けません。置けるかどうか分からないときは、ご購入の前にお問い合わせください）

お手持ちの商品の 3D モデル（.glb）を用意するとき

見本のタンブラーの代わりに、商品の 3D モデルを置きます。Blender で書き出すときは、次の順に進めてください。

1. 色を変えるパーツ、出し分けるパーツ（容量違いなど）、刻印やロゴを貼る面を、それぞれ別のオブジェクトにして名前を付けます（例: body、lid）。
2. 刻印やロゴを貼る面は、本体とは別のオブジェクトにして UV を付けます（刻印は、その面の画像を置き換えて貼るためです）。
3. 「ファイル → エクスポート → glTF 2.0」で、形式を「glTF バイナリ（.glb）」にして書き出します。Draco などの圧縮はオフにします。
4. 設定の model.src を、書き出した .glb の場所に替えてページを開きます。
5. 3D の左上に「モデルに無い名前」が出たら、その名前を設定かモデルの側で合わせます（Blender の Body.001 のような名前は、そのまま書けます）。

3D モデルをお持ちでない方は、写真や文から 3D モデルを作る AI のサービス（Meshy など）や、3D モデルの制作を請け負う方に頼む道があります。モデルの用意から頼みたい方は、別にお見積もりしますので、ご相談ください。

3D が出ない・色が変わらないとき

画面に出る言葉から、原因が分かります。

1. 「3D の部品が見つかりません」と出る ── product-configurator-3d.global.js の置き場所が、設定の scene.src と合っていません。
2. 色が変わらないパーツがある ── 設定の名前とモデルの名前が違います。3D の左上の「モデルに無い名前」をご覧ください。
3. 「知らない項目です」と出て止まる ── 設定の項目名の綴りをご確認ください。
4. 刻印を入れたら、元の模様が消えた ── 刻印専用の面を別に作り、そちらを target にしてください。
5. スマホで重い ── モデルの頂点数を減らすか、画像を 1,024 px 以下にしてください。

npm や React で入れるときは、React 19（19.0〜19.2）が必要です。React 18 のサイトには、素の HTML の置き方をお選びください。