Targeted Animation using A-Frame

🧑‍💻 Technical Support
1

Hey there. I have an animated glb file that I need to be played once it recognizes the flat target, which will be on a wall. I used as the template the Jellyfish Project combined with World Effects animation mixer, it was presented on this video:

I own a school and we want to animate a wall as a science project. So the animation must be steady in front of the wall, just with the movement of the animation itself. I didn’t have any success so far. (code below)

<a-scene
  xrextras-gesture-detector
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true; webgl2: true;"
  xrweb="disableWorldTracking: true">

  <a-assets>
    <a-asset-item id="jelly-glb" src="assets/smalldragon.glb" animation-mixer></a-asset-item>
  </a-assets>

  <a-camera
    position="0 4 10"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>

  <a-light type="directional" intensity="0.5" position="1 1 1"></a-light>

  <a-light type="ambient" intensity="0.7"></a-light>

<!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
  <xrextras-named-image-target name="model-target">
    <!-- Add a child entity that can be rotated independently of the image target. -->
    <a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>
  </xrextras-named-image-target>

</a-scene>```

**head.html:**

<meta name="8thwall:renderer" content="aframe:1.3.0">

<meta name="8thwall:package" content="@8thwall.xrextras">

<meta name="8thwall:package" content="@8thwall.landing-page">

<!-- Other external scripts and meta tags can also be added. -->

<meta name="apple-mobile-web-app-capable" content="yes">

<script crossorigin="anonymous" src="//cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js"></script>```