Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

ブラウザでAR

結論

  • 公式のサンプルコード、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でエクスポートできる

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

おまけ 原因

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

おしまい

kfjt
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away