はじめに
3DモデルをWEB上で表示したいと思ってツールを探してみたらmodel-viewerというものを見つけました。
これを利用すれば簡単に3Dモデルを表示することができそうなので、さっそく使ってみました。
環境
Visual Studio Code 1.72.2
Live Server v5.7.9 （Visual Studio Codeの拡張機能）
Live Serverについては以下をご覧ください。 marketplace.visualstudio.com
利用手順
まずはhtmlファイル(index.html)と3Dモデル(TestObject.glb)を用意し、同じ場所に配置します。
index.htmlは以下のように記載しました。
<!DOCTYPE html> <html> <body> <model-viewer src="TestObject.glb" camera-controls style="width: 1000px; height: 800px;"> </model-viewer> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> </body> </html>
とりあえずさっと動かすだけならこれでOKです。
あとはWEBブラウザ経由でindex.htmlにアクセスすればいいのですが、そのまま開くと3Dモデルへアクセスする際にCORSのエラーが発生します。そのためLive Serverを使用して開きます。
実際に動かしてみると以下のようになります。
3Dモデルが表示されて、マウスで操作することもできていますね。
