Keep 3D model after image target is lost

Question

I am using 8th wall web to detect image target and place model when the target is found. However when the image target is not in view of the camera, the model disappears. I want the model to stay even if the image target is not in view. Such like extended tracking provided in this example: https://www.youtube.com/watch?v=WjwyBLBhfXU

head.html

<!-- Use "8thwall:" meta tags to hook into 8th Wall's build process and developer tools. -->
<meta name="8thwall:renderer" content="aframe:1.2.0">
<meta name="8thwall:package" content="@8thwall.xrextras">

<!-- Other external scripts and meta tags can also be added. -->
<meta name="apple-mobile-web-app-capable" content="yes">

body.html

<!-- Copyright (c) 2021 8th Wall, Inc. -->
<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->
 
<a-scene
  xrextras-gesture-detector
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true"
  xrweb="disableWorldTracking: false">

  <a-assets>
    <a-asset-item id="jelly-glb" src="assets/jellyfish-model.glb"></a-asset-item>
    <img id="jelly-thumb" src="assets/video-thumbnail.jpg">
    <video
      id="jelly-video"
      autoplay
      muted
      crossorigin="anonymous"
      loop="true"
      src="assets/jellyfish-video.mp4">
    </video>
  </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="video-target">
    <a-entity 
      xrextras-play-video="video: #jelly-video; thumb: #jelly-thumb; canstop: true"
      geometry="primitive: plane; height: 1; width: 0.79;"
    ></a-entity>
  </xrextras-named-image-target>

  <!-- 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>

score 1 · Answer 1 · answered Jul 26 '22 at 09:57

1/ Add in the app.js the following component :

AFRAME.registerComponent('keepvisibleonlost', { 
  init() {
    let el = this.el
    el.sceneEl.addEventListener('xrimagelost', function(){
      el.object3D.visible = true
    })
  },
})

2/ Add this new component to your image target in the html :

<xrextras-named-image-target name="video-target" keepvisibleonlost>

Keep 3D model after image target is lost

1 Answers1