Aframe create custom wasd-controls component

Question

I am trying to duplicate the wasd-controls component as my own "mywasd-controls" component. Then once I get past this step I want to make various changes to the component.

In my index.html I added in the "head" section the line:

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

plus I changed my camera line to:

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

Then I copied "wasd-controls.js" exactly to my components directory, except changed the file name to "mywasd-controls.js" and changed line 12 to 'mywasd-controls'

The first 12 lines now look like this:

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

I get the error "require is undefined". It seems obvious that this won't work since " ../core/component" doesn't point to anything. But I'm not sure how to do this correctly.

My Response to the answer from ngokevin:

I have changed the code to what I have below and this works. But I needed to add the actual code for the bind function and the KEYCODE_TO_CODE variable. The 2 error messages I get are "AFRAME.constants is undefined" and "bind is not a function".

Why is that and where do I look in the node files to determine the correct way to access these files?

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

ngokevin ngokevin · Accepted Answer · 2016-11-21T22:25:05

Most of those are available on the window.AFRAME namespace.

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

Aframe create custom wasd-controls component

2 Answers