Web Configurator

An interactive web configurator enabling real-time customization and visualization through optimized 3D models and animations.

プロジェクト

The client was gearing up for a big launch event to introduce their latest Lokotrack® LT400J mobile crusher. As one part of this initiative, they envisioned a web configurator for the machine, that would allow users to customize part options and visualize their configured machine in real time. My role was to lead the planning and implementation of this project. I created prototypes in Figma, performed 3D model optimizations for web integration using Pixyz Studio and created animations in 3ds Max. The final implementation was executed using Storyblok and BabylonJS.

0:00/1:34

プロジェクト

役割

  • - Planning & Prototyping - UI/UX - 3D Pipeline - Materials - Animations

クライアント

Metso Oyj is a global leader in sustainable technology, machines and services for the mining, aggregates, recycling and metal refining industries, operating on an international scale.

Web Configurator

An interactive web configurator enabling real-time customization and visualization through optimized 3D models and animations.

プロジェクト

The client was gearing up for a big launch event to introduce their latest Lokotrack® LT400J mobile crusher. As one part of this initiative, they envisioned a web configurator for the machine, that would allow users to customize part options and visualize their configured machine in real time. My role was to lead the planning and implementation of this project. I created prototypes in Figma, performed 3D model optimizations for web integration using Pixyz Studio and created animations in 3ds Max. The final implementation was executed using Storyblok and BabylonJS.

0:00/1:34

プロジェクト

役割

  • - Planning & Prototyping - UI/UX - 3D Pipeline - Materials - Animations

クライアント

Metso Oyj is a global leader in sustainable technology, machines and services for the mining, aggregates, recycling and metal refining industries, operating on an international scale.

Web Configurator

An interactive web configurator enabling real-time customization and visualization through optimized 3D models and animations.

プロジェクト

The client was gearing up for a big launch event to introduce their latest Lokotrack® LT400J mobile crusher. As one part of this initiative, they envisioned a web configurator for the machine, that would allow users to customize part options and visualize their configured machine in real time. My role was to lead the planning and implementation of this project. I created prototypes in Figma, performed 3D model optimizations for web integration using Pixyz Studio and created animations in 3ds Max. The final implementation was executed using Storyblok and BabylonJS.

0:00/1:34

プロジェクト

役割

  • - Planning & Prototyping - UI/UX - 3D Pipeline - Materials - Animations

クライアント

Metso Oyj is a global leader in sustainable technology, machines and services for the mining, aggregates, recycling and metal refining industries, operating on an international scale.

プロジェクト

このプロジェクトは当社にとって初めてのウェブコンフィギュレーターであり、特にUI/UXデザインにおいてさまざまな課題がありました。ターゲットユーザー層が簡単に操作できる直感的なインターフェースを提供しつつ、スムーズで魅力的な体験を提供し、クライアントのブランドに合わせたデザインを心がけました。さらに、このコンフィギュレーターはデスクトップとモバイルの両方でシームレスに動作する、完全なレスポンシブ対応が求められていました。


3Dモデルには多数の個別パーツが含まれており、そのままではウェブ環境には重すぎました。Pixyz Studioを使って一部のクリーンアップを自動化しましたが、最終的には手作業での最適化が必要な部分も多くありました。また、モデルに初期で含まれていなかったパーツについて、クライアントと連携し、追加依頼を行いました。


BabylonJSとStoryblokについては、以前のバーチャルショールームプロジェクトでの経験がありましたが、コンフィギュレーターでパーツを組み込むという新たな課題がありました。これに対応するため、全アニメーションを1つの連続したタイムラインに統合し、各インタラクションごとにグループ化しました。アニメーションのロジックを管理するために、Googleスプレッドシートを作成し、プログラマーとのコミュニケーションに活用しました。


照明や素材の品質など、一部の要素は予算や時間の制約のために十分な注意を払えませんでしたが、プロジェクトはクライアントのビジョンに合致した、完全に機能するソリューションとして提供されました。ローンチの成功後、同じワークフローを使用してLokotrack® LT350Cをウェブコンフィギュレーターに組み込みました。

画像提供

Kuubi Oy

さらに発見する

連絡先