Question

我是a-frame的新手，经历了基本场景和图片库的教程，当我尝试将两个代码合并在一起时，我无法触发基本场景的a-box＆＃39; s动画。该框没有拾取mouseenter mouseleave并从我的光标单击。但是，我的图片库工作正常。请指教。感谢您的帮助。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; Image Gallery</title>
    <meta name="description" content="360&deg; Image Gallery - A-Frame">
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    <script src="https://npmcdn.com/aframe-animation-component@3.0.1"></script>
    <script src="https://npmcdn.com/aframe-event-set-component@3.0.1"></script>
    <script src="https://npmcdn.com/aframe-layout-component@3.0.1"></script>
    <script src="https://npmcdn.com/aframe-template-component@3.1.1"></script>
    <script src="components/set-image.js"></script>
    <meta name="apple-mobile-web-app-capable"/>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="city" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
        <audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
        <img id="cubes" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="sechelt" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
         <img id="test" crossorigin="anonymous" src="img/1beachdemo.jpg">

        <!--basic scene asset -->
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"/>


        <!--basic scene -->
        <script id="box" type="text/html">
          <a-entity class="box"

            event-set__1="_event: mousedown; scale: 1 1 1"
            event-set__2="_event: mouseup; scale: 1.2 1.2 1"
            event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
            event-set__4="_event: mouseleave; scale: 1 1 1"

            sound="on: click; src: #click-sound"></a-entity>
        </script>

        <!-- Image link template to be reused. -->
        <script id="link" type="text/html">
          <a-entity class="link"
            geometry="primitive: plane; height: 1; width: 1"
            material="shader: flat; src: ${thumb};side:double"
            event-set__1="_event: mousedown; scale: 1 1 1"
            event-set__2="_event: mouseup; scale: 1.2 1.2 1"
            event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
            event-set__4="_event: mouseleave; scale: 1 1 1"
            set-image="on: click; target: #image-360; src: ${src}"
            sound="on: click; src: #click-sound"></a-entity>
        </script>


      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Image links. -->
      <a-entity id="links" layout="type: line; margin: 1.5" position="-1.5 -1 -4">
        <a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
      </a-entity>

      <a-entity id="links" layout="type: line; margin: 1.5" position="-1 -2.5 4" rotation="-85 180 0">
      <a-entity template="src: #link" data-src="#test" data-thumb="#cubes-thumb"></a-entity>
        </a-entity>

    <!--basic scene insert need help here. mouse event here could not be trigger-->
        <a-entity id="box">
            <a-box src="#boxTexture" position="0 2 -5" scale="2 2 2" rotation="0 45 45">
                <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
                <a-animation attribute="scale" begin="mouseenter" dur="200" to="2.3 2.3 2.3"></a-animation>
                <a-animation attribute="scale" begin="mouseleave" dur="200" to="2 2 2"></a-animation>
                <a-animation attribute="rotation" begin="click" dur="2000" to=" 360 405 45"></a-animation>

            </a-box>
        </a-entity>


      <!-- Camera + cursor. -->
      <a-entity camera look-controls  wasd-controls position="0 0 1" rotation="0 0 0">
        <a-cursor id="cursor"
          animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
          animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
          event-set__1="_event: mouseenter; color: springgreen"
          event-set__2="_event: mouseleave; color: black"
          fuse="true"
          raycaster="objects: .link"></a-cursor>

      </a-entity>
      <!--basic scene 
      <a-camera>
                <a-cursor color="lime"></a-cursor>
            </a-camera>
      -->
    </a-scene>
  </body>
</html>

Answer 1

对于初学者来说，你有两个＆＃34;盒子＆＃34; id＆＃39; s，以及两个＆＃34;链接＆＃34; ID＆＃39; S

id attribute应该是唯一的签名。如果你想拥有一个更常见的＆＃39;处理，使用class attribute。

其次，你的raycaster有一个白名单。它应该适用于具有.link类属性的任何实体。该框没有.link类，因此不会触发。

添加＆＃39;链接＆＃39;类到框（从长远来看可能会产生误导），或将框添加到白名单。

<a-box class="link">

或

<a-box class="clickable">
(.....)
raycaster="objects: .link .clickable"></a-cursor>

尝试分析你复制粘贴的内容，通过简单地将两个代码复制到另一个代码中很难合并两个代码。

我改变了它，它似乎正在发挥作用活here。
代码here。

合并图像库和基本场景教程时，aframe光标不会触发

1 个答案: