Question

我正在尝试将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', {`

我收到错误“require is undefined”。很明显，这不起作用，因为“../core/component”没有指向任何东西。但我不确定如何正确地做到这一点。

我对ngokevin答案的回应：

我已将代码更改为下面的代码，这样可行。但我需要为bind函数和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', {

Answer 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', {

Answer 2

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

＆＃34; AFRAME.constants未定义＆＃34; ：在＆＃39; src / index.js＆＃39;没有像

这样的行

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

＆＃34; bind不是函数＆＃34;：在＆＃39; utils / bind.js＆＃39;它应该读

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

（类似于＆＃39; src / utils.shouldCaptureKeyEvent＆＃39;，因为此引用有效）不是

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

由于我无法更改Aframe源代码，因此我无法对上述内容进行测试，但这是我的猜测。

Aframe创建自定义wasd-controls组件

2 个答案: