8th Wall Web AR图像目标丢失后保留3D模型的技术问题咨询

默认xrextras-named-image-target组件会将子元素和图像目标的位姿、显隐完全绑定，目标丢失时自动隐藏子元素。要实现持久化显示，只需将3D模型从图像目标的子节点中移出，作为场景的独立节点存在，仅在首次检测到图像目标时同步一次位姿，后续靠8th Wall已开启的世界跟踪能力维持空间位置即可，具体修改步骤如下：

步骤1：调整body.html的节点结构 #

把原来嵌套在<xrextras-named-image-target name="model-target">内的3D模型节点移到<a-scene>根节点下，设置默认隐藏，给相关节点加id方便调用：

<!-- 图像目标节点保留，用来触发检测事件，无需嵌套模型 -->
<xrextras-named-image-target name="model-target" id="modelTarget">
</xrextras-named-image-target>

<!-- 新增独立的持久化显示模型，默认隐藏 -->
<a-entity 
  id="persistentJelly" 
  xrextras-one-finger-rotate 
  gltf-model="#jelly-glb" 
  visible="false"
></a-entity>

如果视频平面也需要相同的持久化效果，按相同逻辑调整即可。

步骤2：新增自定义位姿同步组件 #

在项目的js文件（一般为app.js，没有可新建后引入页面）中添加如下自定义组件，用来监听图像目标检测事件，同步位姿后显示模型：

AFRAME.registerComponent('persistent-tracker', {
  init: function () {
    // 标记是否已完成首次位姿同步
    this.hasSynced = false
    const persistentModel = document.querySelector('#persistentJelly')
    const imageTarget = document.querySelector('#modelTarget')

    // 监听图像目标被检测到的事件
    imageTarget.addEventListener('xrimagefound', () => {
      // 若需要每次检测到目标都更新位姿，可删除下面这行判断
      if (this.hasSynced) return

      // 同步图像目标当前的世界坐标、旋转、缩放给持久化模型
      const worldPos = new THREE.Vector3()
      const worldQuat = new THREE.Quaternion()
      const worldScale = new THREE.Vector3()
      imageTarget.object3D.getWorldPosition(worldPos)
      imageTarget.object3D.getWorldQuaternion(worldQuat)
      imageTarget.object3D.getWorldScale(worldScale)

      persistentModel.object3D.position.copy(worldPos)
      persistentModel.object3D.quaternion.copy(worldQuat)
      persistentModel.object3D.scale.copy(worldScale)

      // 显示模型，标记同步完成
      persistentModel.setAttribute('visible', true)
      this.hasSynced = true
    })
  }
})

步骤3：给a-scene绑定自定义组件 #

在<a-scene>标签的属性中添加刚才写的persistent-tracker组件即可，其余原有属性无需修改：

<a-scene
  persistent-tracker
  xrextras-gesture-detector
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true"
  xrweb="disableWorldTracking: false">
  <!-- 其余原有内容保持不变 -->
</a-scene>

内容的提问来源于stack exchange，提问作者Saif