Aframe 创建自定义 wasd-controls 组件答案

【问题标题】：Aframe create custom wasd-controls componentAframe 创建自定义 wasd-controls 组件
【发布时间】：2016-11-28 05:01:18
【问题描述】：

我正在尝试将 wasd-controls 组件复制为我自己的“mywasd-controls”组件。然后，一旦我完成了这一步，我想对组件进行各种更改。

在我的 index.html 中我在“head”部分添加了这一行：

<script src="components/mywasd-controls.js"></script>

另外我将相机线改为：

<a-entity camera="fov: 45; near: 0.1; far: 20000" gamepad-controls look-controls mywasd-controls position="0 1.5 5">

然后我将“wasd-controls.js”完全复制到我的组件目录中，除了将文件名更改为“mywasd-controls.js”并将第 12 行更改为“mywasd-controls”

前 12 行现在如下所示：

var registerComponent = require('../core/component').registerComponent;
var bind = require('../utils/bind');
var shouldCaptureKeyEvent = require('../utils/').shouldCaptureKeyEvent;
var KEYCODE_TO_CODE = require('../constants').keyboardevent.KEYCODE_TO_CODE;
var THREE = require('../lib/three');
var MAX_DELTA = 0.2;
/**
* WASD component to control entities using WASD keys.
*/
module.exports.Component = registerComponent('mywasd-controls', {`

我收到错误“要求未定义”。很明显这不起作用，因为“../core/component”没有指向任何东西。但我不确定如何正确执行此操作。

我对 ngokevin 的回答：

我已将代码更改为下面的代码，并且可以正常工作。但我需要为绑定函数和 KEYCODE_TO_CODE 变量添加实际代码。我收到的 2 条错误消息是“AFRAME.constants 未定义”和“绑定不是函数”。

为什么会这样？我应该在哪里查看节点文件以确定访问这些文件的正确方法？

// var registerComponent = require('../core/component').registerComponent;
// var bind = require('../utils/bind');
// var shouldCaptureKeyEvent = require('../utils/').shouldCaptureKeyEvent;
// var KEYCODE_TO_CODE =   require('../constants').keyboardevent.KEYCODE_TO_CODE;
// var THREE = require('../lib/three');
var registerComponent = AFRAME.registerComponent;
// var bind = AFRAME.utils.bind;
var bind = function bind (fn, ctx/* , arg1, arg2 */) {
  return (function (prependedArgs) {
    return function bound () {
  // Concat the bound function arguments with those passed to original bind
  var args = prependedArgs.concat(Array.prototype.slice.call(arguments, 0));
  return fn.apply(ctx, args);
};
  })(Array.prototype.slice.call(arguments, 2));
};
    var shouldCaptureKeyEvent = AFRAME.utils.shouldCaptureKeyEvent;
// var KEYCODE_TO_CODE = AFRAME.constants.keyboardevent.KEYCODE_TO_CODE;
var KEYCODE_TO_CODE = {
    '38': 'ArrowUp',
    '37': 'ArrowLeft',
    '40': 'ArrowDown',
    '39': 'ArrowRight',
    '87': 'KeyW',
    '65': 'KeyA',
    '83': 'KeyS',
    '68': 'KeyD'
  };
var THREE = AFRAME.THREE;
var MAX_DELTA = 0.2;
/**
 * WASD component to control entities using WASD keys.
 */
// module.exports.Component = registerComponent('mywasd-controls', {
AFRAME.registerComponent('mywasd-controls', {

【问题讨论】：

标签： node.js aframe

【解决方案1】：

其中大部分在 window.AFRAME 命名空间中可用。

var registerComponent = AFRAME.registerComponent;
var bind = AFRAME.utils.bind;
var shouldCaptureKeyEvent = AFRAME.utils.shouldCaptureKeyEvent;
var KEYCODE_TO_CODE = AFRAME.constants.keyboardevent.KEYCODE_TO_CODE;
var THREE = AFRAME.THREE

AFRAME.registerComponent('mywasd-controls', {

【讨论】：

【解决方案2】：

已解决，我想我知道为什么会出现 2 个错误。

“AFRAME.constants 未定义”：在 'src/index.js' 中没有这样的行

module.exports = window.AFRAME = { constants: require('./constants')}

“绑定不是函数”：在 'utils/bind.js' 中应该是

module.exports.bind = function (fn.........

（类似于 'src/utils.shouldCaptureKeyEvent'，因为这个参考有效）不是

module.exports = function bind (fn.....

我无法确定上述内容，因为我无法更改 Aframe 源代码，但这是我的猜测。

【讨论】：