A-Frame: масштабирование a-box в EventListener: «this.el не определено» - PullRequest
Новая
       10

A-Frame: масштабирование a-box в EventListener: «this.el не определено»

1 голос
/ 26 сентября 2019

Я хочу установить EventListener в A-Frame (JS), который прослушивает событие mouseenter и изменяет размер окна.Я взял источник из этого урока .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`

1 Ответ

1 голос
/ 26 сентября 2019

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();

или используйте лямбду, которая не меняет область действия: 

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

2) value does not match type

vec3 ожидает вектор: {x: 10, y: 10, z: 10} вместо строки 10 10 10

...