今回やりたかったこと
スキャンしたデータは、PCの中だけに置いておくと共有しづらく、確認する人ごとに専用ソフトが必要になります。そこで今回は、インソールのスキャン結果をWebページ上でそのまま見られる形にしました。
静的HTMLとJavaScriptだけで動くようにしたので、さくらのインターネットのような一般的なレンタルサーバでもそのまま公開できます。
見られるもの
- 色付きの3D形状
- 回転・拡大・移動
- 軽量表示とテクスチャ表示の切り替え
使い道
- 形状の共有
- 凹凸や厚みの確認
- 家族や支援者との相談材料
Webビューア
以下のページで、インソールの色付き3Dデータを実際に操作できます。
インソール3Dビューを開く
軽量な頂点カラー版を初期表示にしているため、比較的読み込みやすい構成です。
OBJ / MTL / JPG
→
Three.js ビューア
→
ブラウザで回転・拡大
今回のポイント
- 色付きで見られること
単色メッシュではわかりにくい表面の雰囲気も、色が残ることで共有しやすくなります。 - 専用ソフト不要で共有できること
URLを共有するだけで、PCでもスマートフォンでも確認しやすくなります。 - 静的サーバに置けること
PHPやデータベースに依存せず、HTML、JS、モデルファイルだけで公開できます。
補足
テクスチャ付きOBJはデータが大きくなりやすいため、初期表示は比較的軽い頂点カラー版にしています。必要なときだけ高品位なテクスチャ表示へ切り替える構成です。