html 图像目标丢失后保留3D模型

cwxwcias  于 2023-03-21  发布在  其他
关注(0)|答案(1)|浏览(110)

我正在使用第八墙网来检测图像目标,并在发现目标时放置模型。然而,当图像目标不在摄像机的视野中时,模型会消失。我希望即使图像目标不在视野中,模型也会保留。如本例中提供的扩展跟踪: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>
xzv2uavs

xzv2uavs1#

1/在app.js中添加以下组件:

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

2/将此新组件添加到html:

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

相关问题