search

artcom / react-three-arjs

AR.js with react-three-fiber
174 stars 42 forks source link

Example with GLTF model #34

Open albertorizzi opened 1 year ago

albertorizzi commented 1 year ago

How can I implement this example? I would when the marker is recognized that appear a GLTF model.

<!DOCTYPE html>
<html>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <!-- we import arjs version without NFT but with marker + location based support -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <body style="margin : 0px; overflow: hidden;">
        <a-scene embedded arjs>
        <a-marker preset="hiro">
            <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
            <a-entity
            position="0 0 0"
            scale="0.05 0.05 0.05"
            gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
            ></a-entity>
        </a-marker>
        <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>
j-era commented 1 year ago

Hi @albertorizzi, this works easily with the useGltf hook from @react-three/drei

import { useGLTF } from "@react-three/drei"

const Model = (url) => {
  const { scene } = useGLTF(url)

  return <primitive object={scene} />
}

...
<ARMarker 
  params={{ smooth: true }}
  type={"pattern"}
  patternUrl={"data/patt.hiro"}
>
  <Suspense fallback={null}>
    <Model url={url} />
  </Suspense>
</ARMarker>
...