javascript - Aframe 组件无法从事件处理程序中引用 el

Question

我正在尝试使用 lance-gg 库编写游戏。我尝试实现一个简单的 aframe 组件，该组件在世界空间中打印实体的 object3D 位置和旋转。问题是我无法this从组件事件侦听器中访问。

我试图四处搜索我发现了这个 [thread] ( Aframe unregister component )，所以我猜问题是初始化顺序。我试图直接从索引中包含一个组件，但它也不起作用。

// 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);
    }
});