Компонент Aframe не может ссылаться на el из обработчика событий

Question

Я пытаюсь написать игру, используя библиотеку lance-gg. Я попытался реализовать простой компонент кадра, который печатает положение объекта и вращение объекта в мировом пространстве. Проблема в том, что я не могу получить доступ к this из прослушивателя событий компонента.

Я попытался найти, нашел этот [поток] ( Отменить регистрацию компонента ), поэтомуЯ предполагаю, что проблема в порядке инициализации. Я пытался включить компонент непосредственно из индекса, но он тоже не работал.

// aSeparateFile.js

AFRAME.registerComponent(
    'custom-component',
    {
        schema: {
            controllerID: {
                type: 'string',
                default: 'none'
            }
        },
        init: () => {
            console.log('componet has been created');
            console.log(this);
        },
        tick: () => {

            console.log(this.el.object3D.rotation);
            console.log(this.el.object3D.position);
        }
    }
);

этот компонент был создан в отдельном файле с именем aSeparateFile.js, я включаю этот файл из моего расширения AFrameRenderer. Например:

import {AFRAMERenderer} from 'lance-gg';

import './aSeparateFile.js';

Я хотел бы узнать, как лучше всего зарегистрировать пользовательский компонент с помощью lance-gg.

Answer 1

Не используйте функции стрелок , которые будут привязывать методы к неправильным this. Вместо этого используйте обычные функции:

AFRAME.registerComponent(
'custom-component',
{
    schema: {
        controllerID: {
            type: 'string',
            default: 'none'
        }
    },
    init: function () {
        console.log('componet has been created');
        console.log(this);
    },
    tick: function () {
        console.log(this.el.object3D.rotation);
        console.log(this.el.object3D.position);
    }
});