みかづきブログ・カスタム

基本的にはちょちょいのほいです。

トップ > A-Frame > 3Dプリント用のモデルをA-Frameで読み込んでMeta Questのブラウザにてプレビューする 👓

3Dプリント用のモデルをA-Frameで読み込んでMeta Questのブラウザにてプレビューする 👓

A-Frame

4年ほど前に、Three.js版の記事を書きましたが、今回はA-Frame版です。

blog.kimizuka.org

また、用途が若干変わって、3Dプリント用に作ったモデルを等倍でプレビューするために使ってみました。

まずはソースコードを全文載せてしまいます。

<html>
  <head>
    <meta charset="UTF-8" />
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene xr-mode-ui="XRMode: xr">
      <a-assets>
        <a-asset-item id="model" src="model.glb"></a-asset-item><!--index.htmlと同じ階層にmodle.glbを置く-->
      </a-assets>
      <a-entity
        grabbable
        gltf-model="#model"
        position="0 1 -1"
        scale=".001 .001 .001"
      ></a-entity>
      <a-entity hand-tracking-grab-controls="hand: left"></a-entity>
      <a-entity hand-tracking-grab-controls="hand: right"></a-entity>
    </a-scene>
  </body>
</html>

短い！なんと22行で完了します。
これだけで、Meta Questのブラウザ向けのパススルーコンテンツが完成します。

今回はこちらのモデルを表示してみました。

先日モデリングした治具です。

👆 面の上についています。

こちらのHTMLをサーバにホスティングして、Meta Questでプレビューした結果がこちら。

3Dプリンタで出力した実物と比べるとわかりますが、ほぼほぼ等倍でプレビューできます。
あと、手で掴んでぐるぐる回しながら全体を確認することもできるのも非常に便利です。
最近は、Meta Quest用のコンテンツはThree.jsで制作していましたが、用途によってはA-Frameで充分だなと思うできごとでした。