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





何ができるか 商品の 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。




