新登場: Vectary Canvas。AIで加速するアイデア創出のための、新しいスペースです。→ Canvas

サイクリングシューズコンフィギュレーター

インタラクティブな3Dプレゼンテーションや、オリジナルのカスタムシューズビルダーを作成できます。

シューズコンフィギュレーターとは?

サイクリングシューズコンフィギュレーターは、カラーやマテリアルのオプションを紹介するだけにとどまらない、インタラクティブな3Dビジュアライゼーションです。3Dアニメーションにより、シューズの技術をさらに深く理解できます。完成したプレゼンテーションは、社内向けのリンクとして直接共有したり、ウェブサイトに埋め込んだり(決済システムとの連携も可能)できます。

コンセプト開発

このシューズプロジェクトの目的は、インタラクティブな構成(コンフィギュレーション)を使用して、技術情報や独自のイノベーションを提示することでした。

‍

インタラクティブな要素の説明内容:

  • ソールの構造(分解図を使用して異なるレイヤーを表示します)
  • クリートの固定方法(シューズへの取り付けや固定 of の仕組み)
  • シューズの締め付けシステム
  • さまざまなマテリアルオプション

‍

完成したバリエーションはARとして共有し、実際の環境で表示して確認することもできます。

サイクリングシューズコンフィギュレーターの作り方

モデルのセットアップ

‍

モデルはRhinoで作成され、.fbxファイルとしてエクスポートされました。ほとんどのサーフェスが複雑であるため、このプロジェクトではモデルのトポロジーに細心の注意を払う必要がありました。そのため、シューズをBlenderにインポートしてUVマッピングを修正し、Vectaryですべてのテクスチャが正しく適用されるようにしました。

‍

ライティングの設定

‍

シューズの複雑で湾曲したサーフェスを考慮すると、ライティングの役割はこれらの形状を際立たせ、立体感を高めることにあります。これを実現するために、位置や向きを簡単にコントロールできるレクタングルライトが好まれます。多くのプロジェクトと同様に、個別のライト(ローカルライト)を優先するために、環境設定の強度(明るさ)を下げることが重要です。メインの光源にシャドウ効果を追加することで、シーンのリアルさとディテールがさらに高まります。

‍

マテリアル

‍

このプロジェクトでは、マテリアルの選択が極めて重要です。サイクリングシューズは滑らかな輪郭を持っていますが、その主要な素材はラフ(粗い質感)になりがちです。目標は、プラスチックのような質感と生地の柔らかさのバランスを取り、柔らかさと頑丈さを兼ね備えたハイブリッドな外観を作り出すことでした。カラーマップに パターンを組み込むことで、 マテリアルのリアルさが向上します。テクスチャの全体的な外観が決定したら、 ライトマップとアンビエントオクルージョン(AO)をベイク処理して、 最終的なクオリティを引き上げるディテールを追加することが重要です。

インタラクション

‍

このシーンでのインタラクションは、主にアニメーション化された2D画像として表現されるホットスポットを使用しています。これらのホットスポットは、シューズを回転させてソールの詳細を確認したり、各パーツを分解してクッション性やメッシュ素材などの特徴を確認したりするアニメーションをトリガーします。アニメーションでは、ネジとソール上の指定の位置を使ってクリートをシューズに取り付ける方法も実演します。さらに、ロゴをクリックするとマテリアルスイッチャーにアクセスでき、シューズのブラックモデルとホワイトモデルを切り替えることができます。技術情報はフローティングUIに表示され、ホットスポットをクリックしてアクセスします。

サイクリングシューズの3Dコンフィギュレーターのメリット

分かりやすい解説

ビジュアライゼーション

意思決定

ウェブサイトにインタラクティブな体験を導入しましょう

3Dオブジェクトコンフィギュレーターとウェブページ間のインタラクションを可能にするAPIを統合し、インタラクティブなストーリーテリングを体験してください。このプロジェクトの目的は、オブジェクトのアニメーションがウェブサイトのスクロール位置やUIカラーの変更とどのように同期するかを示すことです。このプロジェクトはFramerウェブプラットフォーム上で開発されました。

Try Business Workspaces

  • Ideate together in Canvas
  • Create and review 3D as a team
  • Organize projects and control access
  • Publish 3D and AR across every channel
  • Scale with APIs, hosting, and expert support
Talk to our team
Vectary Workspaces with shared folders, team cursors, and a 3D material board