如何使用 Aframe 组件 return 到以前的值？

Question

我为 Aframe 编写了一个组件来更改 src 和 scale光标悬停时的图像。然后，当它退出时，我想 return 到默认值。

所以，我存储默认 src 和默认比例值，然后使用 setAttribute 更新它当光标消失时，它 return 到默认 src，但不是默认比例。

如何正确地做到这一点？

这是我的组件：

AFRAME.registerComponent('change-hotspots-on-hover', {
    schema: {
        src: {default: '#hotspots'},
        scale: {type: 'vec3', default: {x: 1, y: 1, z: 1}},
    },

    init: function () {
        var data = this.data;
        var el = this.el;
        var defaultSrc = el.getAttribute('src');
        var defaultScale = el.getAttribute('scale');

        console.log("Init");

        el.addEventListener('mouseenter', function (){
            console.log("Enter");

            el.setAttribute('src', data.src);
            setTimeout(() => { 
                el.setAttribute('scale', data.scale);
            }, 1);
        });

        el.addEventListener('mouseleave', function (){
            console.log("Exit");

            el.setAttribute('src', defaultSrc);
            el.setAttribute('scale', defaultScale);
        });
    }
});

还有我的头像：

<a-image position="-10 4 -10" scale="1 1 1" material="" src="#hotspot" 
change-hotspots-on-hover="src: #hotspot_hover; scale: 7 3 2;"></a-image>

Answer 1

Looks like getAttribute('scale') returns 比例参考，而不是副本 - 这意味着如果您稍后更改比例（悬停） - defaultScale 所指的对象实际上是被改变的。

您可以通过 mouseover 侦听器中的日志进行检查：

console.log(defaultScale) // here are the default scale values
el.setAttribute('scale', data.scale);
console.log(defaultScale) // here are the data.scale values

您可以解决这个问题，例如，将默认比例字符串化，从而将其变成简单的“1 1 1”（假设为默认比例）：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script>
    AFRAME.registerComponent('change-hotspots-on-hover', {
      schema: {
        src: {default: '#source'},
        scale: {type: 'vec3', default: "1 1 1"},
      },
      init: function() {
        var data = this.data;
        var el = this.el;
          var defaultSrc = el.getAttribute('src');
          var defaultScale = AFRAME.utils.coordinates.stringify(el.getAttribute('scale'));
          el.addEventListener('mouseenter', e => {
            el.setAttribute('src', data.src);
            setTimeout(() => {
              el.setAttribute('scale', data.scale);
            }, 1);
          });

          el.addEventListener('mouseleave', e => {
            el.setAttribute('src', defaultSrc);
            el.setAttribute('scale', defaultScale);
          });
      }
    });
  </script>
  <a-scene cursor="rayOrigin: mouse">
    <a-assets>
      <img id="image" src="https://i.imgur.com/wjobVTN.jpeg">
    </a-assets>
    <a-box position="0 0.5 -3" rotation="0 45 0" color="#4CC3D9" change-hotspots-on-hover="src: #image; scale: 2 2 2"></a-box>
  </a-scene>

如何使用 Aframe 组件 return 到以前的值？

How to return to previous value with Aframe component?

javascript

aframe