HTML5の機能が追加されている中で、Web上でできることが増えています。その一つとして注目したいのがWebVRであったり、AR技術です。これまでは専用のソフトウェアがなければ実現できなかったことがWeb標準の技術で実現できます。 そんなAR/VRを簡単に表示、操作できるライブラリがmodel-viewerです。

model-viewerの使い方

Webコンポーネントとして提供されるので <model -viewer></model> の中でリソースファイルを指定するだけです。

マウス操作でズームイン/アウトや回転もできます。

背景色を変更するパターン。

グリッドで並べて、それぞれ背景色を変更。

大きさも自由です。

リアルに合わせてレンダリング。背景画像を指定できます。

背景画像をWebカメラから取り込むこともできそうです。

AppleのARとも組み合わせられます。

model-viewerはWebコンポーネントになっているので、ライブラリを読み込んだら独自のタグを使って3Dビューワーを定義できます。再利用性も高いので便利です。Web上で3Dを表示したり、ARと組み合わせる際に注目したいソフトウェアです。

model-viewerはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

model-viewer | Easily display interactive 3D models on the web and in AR! GoogleWebComponents/model-viewer: Easily display interactive 3D models on the web and in AR!