モバイルブラウザのマーカー認識でjQuery Reel Pluginを仕様したい

８th wall web + AFrame + jQuery Reel Plugin

８th wall webを仕様してマーカー認識させて、AFrameでコンテンツを表示するwebアプリを作成しています。
jQuery Reel Pluginを使用したコンテンツも作成したいのですが
うまく実現できておりません。
実現方法をご教授していただきたいです。

発生している問題・エラーメッセージ

エラーは発生しておりません

問題点1.
マーカー認識後に表示された画像をスライドしても画像が切り替わらない

問題点2.
透過画像をマテリアルのソースに設定し、ジオメトリにマテリアルを適応しているが
透過されない

該当のソースコード

JavaScript
1<!doctype html>
2<html>
3
4<head>
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
6  <meta name="apple-mobile-web-app-capable" content="yes">
7
8  <title>MarkerTest</title>
9
10  <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script>
11
12  <script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>
13
14  <script src='https://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
15  <script src='jquery.reel.js' type='text/javascript'></script>
16
17  <!-- XR Extras - provides utilities like load screen, almost there, and error handling.
18         See github.com/8thwall/web/xrextras -->
19  <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script>
20
21  <!-- 8thWall Web - Replace the app key here with your own app key -->
22  <script src="//apps.8thwall.com/xrweb?appKey=アプリケーションキー"></script>
23
24<script>
25
26    AFRAME.registerComponent('target-video', {
27      schema: {
28        name: { type: 'string' }
29      },
30      init: function () {
31        const object3D = this.el.object3D
32        const name = this.data.name
33        object3D.visible = false
34        const el = this.el
35        
36        const showImage = ({detail}) => {
37          if (name != detail.name) {
38            return
39          }
40
41          el.setAttribute("class","cantap");
42          object3D.position.copy(detail.position)
43          object3D.quaternion.copy(detail.rotation)
44          object3D.scale.set(detail.scale, detail.scale, detail.scale)
45          object3D.visible = true
46        }
47        const hideImage = ({detail}) => {
48
49          if (name != detail.name) {
50            return
51          }
52          i = 1;
53          object3D.visible = false
54          el.removeAttribute("class","cantap")
55        }
56        this.el.sceneEl.addEventListener('xrimagefound', showImage)
57        this.el.sceneEl.addEventListener('xrimageupdated', showImage)
58        this.el.sceneEl.addEventListener('xrimagelost', hideImage)
59
60      }
61    })
62
63  </script>
64
65</head>
66
67<body>
68
69  <a-scene
70    xrweb="disableWorldTracking: true"
71    xrextras-gesture-detector
72    xrextras-almost-there
73    xrextras-loading
74    xrextras-runtime-error>
75
76    <a-assets>
77
78
79      <!--画像は、texture_101.pngからtexture_124.pngまでナンバリング-->
80
81      <image 
82      src="Texture/texture_101.png" width="514" height="856"
83      class="reel"
84      id="image"
85      data-images="Texture/texture_###.png|101..124">
86
87
88    </a-assets>
89
90    <a-camera
91      position="0 4 10"
92      raycaster="objects: .cantap"
93      cursor="fuse: false; rayOrigin: mouse;">
94    </a-camera>
95
96    <a-light type="directional" intensity="0.5" position="1 1 1"></a-light>
97
98    <a-light type="ambient" intensity="1"></a-light>
99
100    <a-entity
101      target-video="name: マーカー名;"
102      material="src: #image;"
103      geometry="primitive: plane; height: 1.0; width: 0.6;">
104    </a-entity>
105
106  </a-scene>
107
108</body>
109</html>
110