按钮事件被忽略 8thwall

Question

我很困惑，我无法让我的 webAR 体验发挥作用。我希望我能在这里得到帮助。我只需要我的按钮激活我的 rain.glb 如果我能做到这一点，我想其他一切对我来说都会有意义。

这就是头脑中发生的事情

<!-- Copyright (c) 2022 8th Wall, Inc. -->
<!-- head.html is optional; elements will be added to your html head before app.js is loaded. -->

<!-- Use "8thwall:" meta tags to hook into 8th Wall's build process and developer tools. -->
<meta name="8thwall:renderer" content="aframe:1.3.0">
<meta name="8thwall:package" content="@8thwall.xrextras">
<meta name="8thwall:package" content="@8thwall.landing-page">

<!-- Other external scripts and meta tags can also be added. -->
<meta name="apple-mobile-web-app-capable" content="yes">

<script crossorigin="anonymous" src="//cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js"></script>

在身体

<button id="rainBtn">Toggle Rain Visibility</button>

<a-scene
  tap-place
  xrextras-gesture-detector
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true; webgl2: true;"
  xrweb="allowedDevices: any">
 
   <!-- Assets -->
 <a-assets>
      <a-asset-item id="raccoonasset" src="assets/raccoon5.glb"></a-asset-item>
      <a-asset-item id="emperorasset" src="assets/emperor3.glb"></a-asset-item>
      <a-asset-item id="heartasset" src="assets/pixel-heart1.glb"></a-asset-item>
      <a-asset-item id="rainasset" src="assets/rain.glb"></a-asset-item>
 </a-assets>

    <!-- Lights and Camera -->
    <a-entity light="type: directional; castShadow: true; color: white; intensity: 0.5;" position="5 10 7"></a-entity>
    <a-light type="ambient" intensity="0.7"></a-light>
    <a-camera position="0 2 2" raycaster="objects: .cantap" cursor="fuse: false; rayOrigin: mouse;"></a-camera>

<xrextras-named-image-target name="model-target">
  <a-entity
    id="raccoon-glb-target"
    gltf-model="#raccoonasset"
    scale="0.2 0.2 0.2"
    position="0 -0.35 0"
    animation-mixer="timeScale: 1"
  ></a-entity>
</xrextras-named-image-target>

<xrextras-named-image-target name="emperor-target">
  <a-entity
    id="emperor-glb-target"
    gltf-model="#emperorasset"
    scale="0.9 0.9 0.9"
    animation-mixer="timeScale: 1"
  ></a-entity>
</xrextras-named-image-target>

<xrextras-named-image-target name="heart-target">
  <a-entity
    id="heart-glb-target"
    gltf-model="#heartasset"
    scale="0.5 0.5 0.5"
    animation-mixer="timeScale: 0"
    animation__spin="property: rotation; dur: 5000; easing: linear; loop: true; to: 0 360 0"
    animation__move-up-down="property: position; dur: 3000; easing: easeInOutQuad; loop: true; to: 0 1 0"
  ></a-entity>
</xrextras-named-image-target>


  <!-- Rain model -->
  <a-entity
    id="rain-glb-target"
    gltf-model="#rainasset"
    scale="2 2 2"
    position="0 0.8 0"
    animation-mixer
    visible="false">
  </a-entity>

</a-scene>

在 app.js

// Copyright (c) 2022 8th Wall, Inc.
//
// app.js is the main entry point for your 8th Wall app. Code here will execute after head.html
// is loaded, and before body.html is loaded.
import './main.css'

// app.js

import {onClickRainButton} from './rain-button'

AFRAME.registerComponent('rain-button', {
  init() {
    console.log('Rain button component initialized.')

    const rainBtn = document.getElementById('rainBtn')
    if (rainBtn) {
      rainBtn.addEventListener('click', onClickRainButton)
      console.log('Event listener registered for rain button.')
    } else {
      console.error('Rain button element not found.')
    }
  },
})

以及在 rain-button.js

// rain-button.js

// Function to handle click event on the rain button
function onClickRainButton() {
   console.log('Rain button clicked.');
  // Get the rain entity
  const rainEntity = document.querySelector('#rain-glb-target')

  // Check if the rain entity exists and toggle its visibility
  if (rainEntity) {
    const isVisible = rainEntity.getAttribute('visible')
    rainEntity.setAttribute('visible', !isVisible)
  }
}

export {onClickRainButton}

我希望我不会灼伤任何人的眼睛，我感谢任何帮助。

我尝试了几种不同的方法来编写此内容，我尝试仅向我的按钮添加一个简单的网址链接，我尝试仅使用屏幕上的点击但没有任何效果，所以我认为这是一个我没有看到的更大问题。

Answer 1

我查看了您的代码，问题似乎在于您的雨按钮组件未附加到场景中的任何实体。这可能就是您没有看到预期行为的原因。

要解决此问题，您需要将雨按钮组件附加到场景中的实体，例如 或另一个元素。例如：

 <a-scene
      rain-button
      tap-place
      xrextras-gesture-detector
      landing-page
      xrextras-loading
      xrextras-runtime-error
      renderer="colorManagement:true; webgl2: true;"
      xrweb="allowedDevices: any">

     </a-scene>

附加组件后，下雨按钮的单击事件应按预期触发。