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

Question

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

我已经尝试搜索并找到了这个 [thread] ()，所以我猜问题出在初始化顺序上。我试图直接从索引中包含一个组件，但它也没有用。

// 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

不要使用 arrow functions，这会将方法绑定到错误的 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);
    }
});

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

Aframe component can't reference el from event handler

javascript

aframe

lance