ブラウザでAR、Google検索で動物が出てくるアレを自前3Dモデルで出来る

ブラウザでAR

• Googleの動物3D話題になりました engadget.com の記事
• この技術の公式ドキュメントのとおりやったら、自前3Dオブジェクトを簡単に表示できた
• ARについてはiOSはイケたけど、Androidはイケなかった

結論

• 公式のサンプルコード、src要素 assets/Astronaut.glb なんて書いてあるけど
• 相対パスではダメ、絶対パスにすること！
• 以上

だめなやつ

<model-viewer src="assets/Astronaut.glb" ar camera-controls alt="A 3D model of an astronaut" background-color="#222" ios-src="assets/Astronaut.usdz" magic-leap unstable-webxr></model-viewer>

コード全体

• Reactコンポーネントです

ModelViewer.js

import React, { useRef, useEffect } from 'react'
import '@google/model-viewer'

import { BallGlb, BallUsdz } from './assets/Ball'

const ModelViewer = ({ glb, usdz }) => {
  const mv = useRef(null)

  useEffect(() => {
    const modelViewer = mv.current
    const srcURL = new URL(glb, modelViewer.baseURI) // ここで絶対パスにしてる
    modelViewer.ar = true
    modelViewer.cameraControls = true                // 公式ドキュメントで camera-controls って言ってるやつ
    modelViewer.src = srcURL.href
    modelViewer.iosSrc = usdz                        // 公式ドキュメントで ios-src って言ってるやつ
    modelViewer.quickLookBrowsers = 'safari chromea' // 公式ドキュメントで quick-look-browsers って言ってるやつ
  }, [mv, glb, usdz])

  return (
    <model-viewer ref={mv} />
  )
}

export const BallModelViewer = () => (
  <ModelViewer glb={BallGlb} usdz={BallUsdz} />
)

export default ModelViewer

ファイル構成

jsと3dモデルの位置関係

.
│  ModelViewer.js
└─assets
  └─Ball
      Ball.glb
      Ball.usdz
      index.js

assets/Ball/index.js

import BallGlb from './Ball.glb'
import BallUsdz from './Ball.usdz'
export { BallGlb, BallUsdz }

おまけ 3Dファイル

3Dオブジェクトをここでつくって、gltfやobjでエクスポートできる

• https://www.tinkercad.com/

objファイルをここでインポートしてusdzファイルでエクスポートできる

• https://usdz.viewar.com/

おまけ 原因

タグ model-viewer の要素 src が new URL(gltfSrc) に渡されてるので URLがパースできません、ってエラーになる

おしまい