Увеличение с использованием 8th Wall SDK с несколькими целями изображения - PullRequest
Новая
       25

Увеличение с использованием 8th Wall SDK с несколькими целями изображения

0 голосов
/ 28 апреля 2020

Я хочу увеличить видео на нескольких изображениях. Так что я пытаюсь реализовать 8-е увеличение отслеживания изображений на стене с несколькими изображениями . Но я не могу получить увеличение. У меня проблема с целями изображения. Если я упомяну имя цели изображения в html, то оно будет работать.

<a-entity target-video="name: imageTargets; video: #alpha-video;" material="shader: chromakey; src: #alpha-video; color: 0.1 0.9 0.2" geometry="primitive: plane; height: 0.6; width: 1.38;"> </a-entity>

name: imagetarget1 (одно из имен цели изображения в 8-й настенной консоли )

Но когда я пробую несколько изображений, это не работает. Может ли кто-нибудь помочь мне решить эту проблему. Я загрузил 10 изображений в 8-ю настенную консоль, и их имена следующие: 'imagetarget1', 'imagetarget2', 'imagetarget3', 'imagetarget4', 'imagetarget5', 'imagetarget6', 'imagetarget7', 'imagetarget8', 'imagetarget9 ',' imagetarget10 '. 

AFRAME.registerComponent('target-video', {
  schema: {
    name: {
      type: 'string'
      XR8.XrController.configure({
        imageTargets: ['imagetarget1', 'imagetarget2', 'imagetarget3', 'imagetarget4', 'imagetarget5', 'imagetarget6', 'imagetarget7', 'imagetarget8', 'imagetarget9', 'imagetarget10']
      })
    },
    video: {
      type: 'string'
    },
  },
  init: function() {
    const object3D = this.el.object3D
    const name = this.data.name
    object3D.visible = false
    const v = document.querySelector(this.data.video)
    const el = this.el

    const showImage = ({
      detail
    }) => {
      if (name != detail.name) {
        return
      }
      v.play()
      object3D.position.copy(detail.position)
      object3D.quaternion.copy(detail.rotation)
      object3D.scale.set(detail.scale, detail.scale, detail.scale)
      object3D.visible = true
    }

    const hideImage = ({
      detail
    }) => {
      if (name != detail.name) {
        return
      }
      v.pause()
      object3D.visible = false
    }

    this.el.sceneEl.addEventListener('xrimagefound', showImage)
    this.el.sceneEl.addEventListener('xrimageupdated', showImage)
    this.el.sceneEl.addEventListener('xrimagelost', hideImage)
  }
})
<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <title>8th Wall Alpha Video Example</title>

  <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script>
  <script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>


  <!-- XR Extras - provides utilities like load screen, almost there, and error handling.
                 See github.com/8thwall/web/xrextras -->
  <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script>

  <!-- 8thWall Web - Replace the app key here with your own app key -->
  <script src="//apps.8thwall.com/xrweb?appKey=XXXXXXXXXX"></script>

</head>

<body>

  <a-scene xrweb="disableWorldTracking: true" xrextras-gesture-detector xrextras-almost-there xrextras-loading xrextras-runtime-error>

    <a-assets>
      <video id="alpha-video" autoplay playsinline crossorigin="anonymous" loop="true" src="https://cdn.glitch.com/087c366e-1fe1-4d07-8886-bfaf18fbc321%2Fdino.mp4?v=1588058174702">
              </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="1"></a-light>

    <!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
    <a-entity target-video="name: imageTargets; video: #alpha-video;" material="shader: chromakey; src: #alpha-video; color: 0.1 0.9 0.2" geometry="primitive: plane; height: 0.6; width: 1.38;">
    </a-entity>

  </a-scene>

  <script>
  </script>

</body>

</html>

Может ли кто-нибудь помочь мне разобраться в этом вопросе Заранее спасибо

1 Ответ

1 голос
/ 30 апреля 2020

Как уже сказал @Rob, это не служба написания кода. Но этот может быть полезным для вас https://www.8thwall.com/8thwall/image-api-aframe

...