Targeted Animation

🧑‍💻 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.

2

Can you show what you have so I can point you in the right direction?

3

Of course. Thank you!

body.html:

<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:**
```
4

@GeorgeButler on head.html I added:

<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>```
5

Any news @GeorgeButler ? I wasn’t able to make it work.

6

@GeorgeButler @Ian
Can you guys help me out?

7

You need to write a custom image target component. Please reference the sampe projectcode here:

Essentially you want to add your animation dynamically via the xrimagefound event which runs the xrimagefound function the code above

so in the xrimagefound function you would add something like

yourModel.setAttribute('animation-mixer', {
        clip: 'yourAnimation',
        loop: 'repeat',
      })
8

Also make sure you have imported the external animation-mixer script

As shown in the example project on line 10 here:

9

Everything worked well! Thank you!

1 Like
10

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.