1

我是使用 8thWall 的新手，并且一直在调整 8thWall 库中的Image Targets Flyer作为我自己项目的起点。

我注意到，当我向a-entity标签添加 Chromakey 着色器时，初始缩略图总是呈现黑色并且不显示预期的图像。不使用 Chromakey 时，我可以正确看到缩略图。

到目前为止，这是我的代码：

<!-- 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: true">

  <a-assets>
    <img id="jelly-thumb" src="assets/video-thumbnail.png">
    <video
      id="jelly-video"
      crossorigin="anonymous"
      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;"
      material="shader: chromakey; src: #jelly-video; color: 0.1 0.9 0.2">
    </a-entity>
  </xrextras-named-image-target>
</a-scene>

我确保我的项目引用了 head.html 中的 aframe-chromakey-material.min.js JavaScript 插件。

任何帮助表示赞赏！

4

0 回答 0