SketchfabのViewerAPIを使ってコンテンツを作ってみました！

こんにちは、チャリセです！
Sketchfabというサービスはご存じでしょうか？

Sketchfabは3D、VR、ARコンテンツを公開、共有、売買するためのプラットフォームです。
3Dモデルをウェブ上で表示することやモバイルブラウザ、デスクトップブラウザ、バーチャル・リアリティヘッドセットで閲覧ができるWebGLとWebVRを基にしたビューアを提供しています。
自分で作った３Dデータをwebブラウザ上で簡単に公開ができたり、また他人の作った3Dデータを見ることができます。
Sketchfabのメリットは、
・Webブラウザ上で3Dデータを360度閲覧できます。
・ユーザー間で３Dデータを共有できます。
・３DデータをWebXR（VR、AR）で体験できます。
・ViewerAPIを使えば、
　さらに、
・Viewer APIを使用すると、Sketchfabの3Dビューアの上にWebアプリを構築できます。
・APIを使用すると、JavaScriptでビューアを制御できます。
・ビューアの起動、停止、カメラの移動、スクリーンショットの撮影などの機能を提供します。
　ViewerAPIは以下から見ることができます。
　⇒　https://sketchfab.com/developers/viewer

今回は、そんなSketchfabのViewerAPIを使ってマテリアルチェンジできないか試してみました。
マテリアルチェンジ、アニメーション再生専用のサービス「3D Configurator」ありがますが、
初期費用がかなり高い（2000～5000ドル）ので、個人や中小企業ですとなかなか契約が難しいです。
しかし、APIでできることは限られていますが、「3D Configurator」と似たようなことはできるので、コンテンツを制作してみることにしました。
このAPIを使うことによって初期費用を抑えることができます。

以下のようにインテリアモデルをSketchfabにアップロード＆環境設定しました。
以下のURLよりご確認いただけます。
https://sketchfab.com/3d-models/sample-freseal-mansion-living-b5f511f4bbcc43e7a7624b5923dec997

sample_Freseal_Mansion_living by 3DMODELJAPAN

その後、SketchfabのViewerAPIを使って以下のようにマテリアルチェンジできるようにしました。

自分のウェブページにSketchfab側から発行できるIframeを表示するようにし、
右側にあるように床のマテリアルチェンジ可能な素材をUIボタンと
基本的にSketchfab側で発行できるIframeを自分のウェブページに組み込んで、あとはAPIを使って変更したい床のマテリアルにUIで設定してあるマテリアルをあてるだけです。

インテリアカラーチェンジシステム体験はこちらより

今回はマテリアルチェンジはできました、次はカメラ切り替えをやってみます。

現在
株式会社チョモランマ
 株式会社シェルパ
 3Dmodeljapan株式会社
ではスタッフを大募集しております！！
Unreal Engine4、AI、プログラミングや建築パースに興味がある方！
ぜひご応募下さい！！
初心者の方、未経験の方やインターンを受けてみたい方々でも大歓迎です！！