A-Frame：在 EventListener 中缩放 a-box："this.el is undefined"

Question

我想在 A-Frame (JS) 中设置一个 EventListener 来监听 'mouseenter'-事件并重新缩放一个框。我从 this tutorial 获取了源代码。每次我将光标移到框上时，EventListener 都会触发，但随后控制台会显示

TypeError: this.el is undefined

参考这行代码：

this.el.object3D.scale.copy(data.to);

这是代码：

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('scale-on-mouseenter', {
    schema: {
      to: {default: '10 10 10', type: 'vec3'}
    },

    init: function () {
      var data = this.data;
      this.el.addEventListener('mouseenter', function () {
        this.el.object3D.scale.copy(data.to);
      });
    }
  });
</script>
...
 <a-box position="0 2 -5" scale-on-mouseenter>
 </a-box>

它还说：

core:schema:warn Default value `10 10 10` does not match type `vec3` in component `scale-on-mouseenter`

Answer 1

1) this.el is undefined.

这是scope的事情。 this 指的不是同一个对象：

//....
init: function() {
// here this refers the component object
console.log(this) 
this.el.addEventListener('event', function() {
    // here this refers to this.el (as the object which has the listener added)
    console.log(this)
//...

你创建一个引用数据对象的变量，你可以用 this.el:

做同样的事情

var el = this.el;
this.el.addEventListener('click', function() {
    el.doSomething();

或者使用不改变作用域的 lambda：

this.el.addEventListener('click', e => {
    this.el.doSomething();

2) value does not match type

vec3 需要一个向量：{x: 10, y: 10, z: 10} 而不是字符串 10 10 10

A-Frame：在 EventListener 中缩放 a-box："this.el is undefined"

A-Frame: Scaling a-box in EventListener: "this.el is undefined"

javascript

aframe