How to use the aframe/src.registerComponent function in aframe

import AFRAME from 'aframe/src';

import { bind, callLater } from 'utils/components';

AFRAME.registerComponent('gui-opener', {
  dependencies: ['gui'],
  schema: {
    state: { type: 'string' },
  },

  init() {
    this.unbind = callLater(
      bind(this, 'handleStateAdded', this.el, 'stateadded'),
      bind(this, 'handleStateRemoved', this.el, 'stateremoved'),
      bind(this, 'handleGuiCreated', this.el, 'gui-created'),
    );
  },
  remove() {
    this.unbind();
  },

import AFRAME, { THREE } from 'aframe/src';
import flattenDeep from 'lodash/flattenDeep';

import { listen, callLater } from 'utils/components';

/**
 * Copyright https://github.com/mayognaise/aframe-mouse-cursor-component
 * I've modified it to consider only subset of all children by 'objects' property
 */

const IsVrAvailable = AFRAME.utils.device.isMobile() || window.hasNonPolyfillWebVRSupport;
const AbortClickDistanceEps = 0.04;

AFRAME.registerComponent('mouse-cursor', {
  schema: {
    objects: { type: 'string' },
  },

  init() {
    this.__raycaster = new THREE.Raycaster();
    this.__mouse = new THREE.Vector2();
    this.__isMobile = this.el.sceneEl.isMobile;
    this.__isStereo = false;
    this.__active = false;
    this.__isDown = false;
    this.__intersectedEl = null;
    this.attachEventListeners();
  },

  remove() {

import path from 'path';
import AFRAME from 'aframe/src';
import debug from 'debug';
import JSZip from 'jszip';

import { readFile } from 'utils/files';

const info = debug('app:components:fs-dragndrop:info');

AFRAME.registerComponent('fs-dragndrop', {
  schema: {
    openOnDrop: { default: true },
  },

  init() {
    const { el: { components: { fs } } } = this;

    this.files = [];
    const component = this;

    this.handleDrop = this.handleDrop.bind(this);
    this.handleDragOver = this.handleDragOver.bind(this);
    document.addEventListener('dragover', this.handleDragOver);
    document.addEventListener('drop', this.handleDrop);

    this.cleanup = fs.registerFileSystem({

import AFRAME, { THREE } from 'aframe/src';

import { bind, callLater } from 'utils/components';

const Modes = ['translate', 'rotate', 'scale'];
const DoubleClickInterval = 200;

AFRAME.registerComponent('transformable', {
  init() {
    this.unbind = callLater(
      bind(this, 'handleChangeMode', this.el, 'click'),
      bind(this, 'handleCreateControls', this.el, 'stateadded'),
      bind(this, 'handleDestroyControls', this.el, 'stateremoved'),
    );
  },
  tick() {
    if (this.controls) {
      this.controls.update();
    }
  },
  remove() {
    const { sceneEl: { object3D } } = this.el;
    if (this.controls) {
      this.controls.detach();

import AFRAME from 'aframe/src';
import size from 'lodash/size';

import { bind, callLater } from 'utils/components';

AFRAME.registerComponent('gui-main', {
  dependencies: ['gui'],
  schema: {
    fsToBrowse: { type: 'string' },
  },
  init() {
    this.fsEntity = document.querySelector('[fs]');
    this.unbind = callLater(
      bind(this, 'handleFsUpdate', this.fsEntity, 'fs-updated'),
      bind(this, 'handleGuiCreated', this.el, 'gui-created'),
    );
  },
  remove() {
    this.gui.removeFolder(this.fsFolder);
    this.unbind();
  },

import AFRAME, { THREE } from 'aframe/src';

AFRAME.registerComponent('orbit-controls', {
  dependencies: ['camera', 'position'],
  init() {
    this.el.getObject3D('camera').position.z = 10;
    this.el.sceneEl.addEventListener('render-target-loaded', () => {
      this.controls = new THREE.OrbitControls(
        this.el.getObject3D('camera'),
        this.el.sceneEl.canvas
      );
      this.controls.enabled = this.isPlaying;
    }, {
      once: true,
    });
  },
  play() {
    if (!this.controls) {
      return;

import AFRAME from 'aframe/src';

import { bind } from 'utils/components';
import { CommonPaths } from 'utils/paths';

import { GuiMethods } from './gui-entity-editor';

AFRAME.registerComponent('z-world', {
  dependencies: ['z-entity'],
  schema: {
    fileName: { type: 'string' },
  },
  [GuiMethods]: [
    ['handleLoadModel', 'Load model'],
  ],

  init() {
    this.unbind = bind(
      this, 'handleWorldLoaded',
      this.el, 'model-loaded'
    );
  },
  remove() {
    this.unbind();

import AFRAME, { THREE } from 'aframe/src';

import { bind, callLater } from 'utils/components';
import { CommonPaths } from 'utils/paths';

import { GuiMethods } from './gui-entity-editor';

AFRAME.registerComponent('z-model', {
  dependencies: ['z-entity'],
  schema: {
    id: { type: 'string' },
    position: { type: 'array' },
    rotation: { type: 'array' },
    scale: { type: 'array' },
    fileName: { type: 'string' },
    _unknownColor: { type: 'string' },
    _unknownFlag1: { type: 'number' },
    _unknownFlag2: { type: 'number' },
    _unknownInt: { type: 'number' },
  },
  [GuiMethods]: [
    ['handleLoadModel', 'Load model'],
  ],

import AFRAME, { THREE } from 'aframe/src';

import { bind, callLater } from 'utils/components';
import { CommonPaths } from 'utils/paths';

import { GuiMethods } from './gui-entity-editor';

AFRAME.registerComponent('z-fo-model', {
  dependencies: ['z-entity'],
  schema: {
    id: { type: 'string' },
    fileName: { type: 'string' },
    position: { type: 'array' },
    rotation: { type: 'array' },
    _unknownFloats: { type: 'string' },
    scale: { type: 'array' },
    _unknownColor: { type: 'string' },
    _unknownFlags: { type: 'array' },
    _unknownInt1: { type: 'number' },
    _unknownFlag: { type: 'number' },
    _unknownInt2: { type: 'number' },
  },
  [GuiMethods]: [
    ['handleLoadModel', 'Load model'],

import AFRAME from 'aframe/src';
import groupBy from 'lodash/groupBy';

AFRAME.registerComponent('z-scene', {
  schema: {
    scene: { type: 'string' },
  },

  getData() {
    const scene = { ...this.data.scene };
    const entitiesByType = groupBy(this.el.children, child => (
      child.components['z-entity'].data.type
    ));
    if (entitiesByType.fo_model_v4) {
      const models = entitiesByType.fo_model_v4.map(entity => (
        entity.components['z-fo-model'].data
      ));
      scene.FOModels_v4 = { models };
    }
    if (entitiesByType.model_v3) {