カテゴリー: 3D表示：間取り図とは?

サイトの主な展示物は、建物の間取り図の表示です。　二次元の画像で表記されることが、多かった間取り図ですが、3D CGの普及や、webアプリケーションにおいても、ブラウザ上で3D画像を動かす表記も可能となっています。

その一つが、model-viewerであり、これはGoogleが開発するプロジェクトで、Webでより簡単にインタラクティブな3Dモデルを表示することができます。

<model-viewer>を利用したコンテンツは、AndroidではScene Viewer、iOSではAR Quick Lookという機能を用いて表示されます。　またパソコン上で動作する複数のブラウザでも表現が可能です。html,css,JavaScriptを利用して作成)

<style>
  model-viewer#interaction {
    --poster-color: transparent;
  }
</style>
<!-- use unique asset to ensure preloading -->
<model-viewer id="interaction" camera-controls loading="eager" reveal="interaction" poster="../../assets/poster-sphere.png" src="../../shared-assets/models/reflective-sphere.gltf" alt="A 3D model of a reflective sphere"></model-viewer>

まずは表示される3D画像を準備しておく必要があります。Android対応にするにはglb / gltf、iOS対応にするにはusdzのモデルが必要となります。パソコンやスマホでのブラウザ対応は、 glb / gltf が利用できます。下記のサイトから、デモンストレーションを参照することが可能です。

https://modelviewer.dev/