3D 商品コンフィギュレーター ── 商品ページで色・素材・パーツ・刻印・ロゴを選ばせ、3D と価格をその場で変える部品（GLB 1 つと設定 1 つで動く）

何ができるか

商品の 3D モデル（glTF の .glb）と JSON の設定を 1 つずつ用意すると、商品ページに「回して、選んで、価格が出る」コンフィギュレーターが置けます。お客さまが色や容量を押すたびに 3D の商品が変わり、価格がその場で計算されます。選んだ内容は JSON・PNG・共有 URL で取り出せるので、注文フォームやお問い合わせにそのまま添えられます。

選択肢は 5 種類。色（色・粗さ・金属感）、素材、パーツの表示（容量違いなど）、刻印（文字を描いたラベルを貼る）、ロゴ（お客さまの画像を貼る）。JSON に書くだけで、プログラムは書きません

価格は基本価格に選択肢の差額を足します。刻印は文字を入れたとき、ロゴは画像を入れたときだけ足します

大きさ合わせ・照明・床・金属の映り込みは部品が持っています。外部ファイルはありません

「選択内容をコピー」で JSON、「PNG で保存」で横 1,600 px の画像、「共有 URL をコピー」で同じ選択で開ける URL

お客さまが選んだ画像はブラウザの中で 3D に貼るだけで、どこにも送りません

サーバーも API も要りません。静的なファイル 2 本と CSS 1 本を置くだけで、月々の費用はありません

WebGL の無い端末では 3D の枠に断りを出し、選択肢と価格はそのまま使えます

ステンレスタンブラーの GLB と設定 2 つを同梱。買ってすぐ動きます

置き方

素の HTML（<script> 2 本と <div> 1 つ）、npm（mount(要素, 設定)）、React / Next.js（<ProductConfigurator config={…} />）の 3 通り。3D の部品（およそ 1 MB）はページを開いたあとに読み込むので、表示は遅くなりません。

3D モデルの用意

Blender などで書き出した .glb をそのまま読みます（圧縮なし）。設定で触るパーツにオブジェクト名を付け、刻印・ロゴを貼る面には UV を持たせます。設定にあってモデルに無い名前は、画面の左上に小さく知らせます。3D モデルの制作そのものは含みません。

費用

キットは買い切りです。サーバーも API も使わないので、月々の費用はありません。

守り

選んだ画像はブラウザの外に出しません。共有 URL に入るのは選択肢の id と刻印の文字だけです

設定の model.src は相対パスか https:// だけを受け付けます

刻印に使える文字と字数は設定で決められます

動作環境

WebGL の使えるブラウザ（PC・スマートフォンの現行版）。npm・React で使う場合は Node 20 以上、React 18 以上。three.js は依存として一緒に入ります。

価格とライセンス

発売記念価格 9,800 円（9 月 30 日まで）。以降は 12,800 円です。記念価格で買うと 1.x のアップデートも無料です。改変と納品は自由、再配布・転売・同種商品化は禁止。購入後 14 日間、不具合のご連絡に対応します（3 営業日以内に返信）。

zip の中身

embed/（素の HTML 用の 3 ファイルと見本、貼り付け用の断片）、page/（単体で開ける見本ページ）、dist/（npm 用と素の HTML 用の束）、src/・test/（TypeScript のソースとテスト 104 本）、samples/（GLB と設定 2 つ）、demo/、styles/、npm 用の tgz、README.ja.md、LICENSE.md、CHANGELOG.md。