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的{{3}}。改用常规函数：

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

1 个答案: