How to use the aframe.registerComponent function in aframe

To help you get started, we’ve selected a few aframe examples, based on popular ways it is used in public projects.

github Kif11 / three-body / src / components / FireManager.js View on Github external
import AFRAME from 'aframe';
const THREE = AFRAME.THREE;

AFRAME.registerComponent('fire-manager', {
  init: function () {
    this.el.addEventListener('vertex-cache-loaded', (evt) => {
      this.model = this.el.object3D.children[0];
      this.model.visible = false;
    });

    this.el.sceneEl.addEventListener('start-char-fire', (evt) => {
      this.el.emit('start-vertex-animation'); // vertex cache texture waits for this event to start the animation
      this.animateScale = true;
      this.model.visible = true;
    });

    this.el.sceneEl.addEventListener('stop-char-fire', (evt) => {
      this.el.emit('stop-vertex-animation');
      this.animateScale = true;
      this.model.visible = false;
github Kif11 / three-body / src / components / WebUIController.js View on Github external
import AFRAME from 'aframe';

AFRAME.registerComponent('web-ui-controller', {
  init: function () {
    const { sceneEl } = this.el;
    const startBtnEl = document.getElementById('startBtn');
    const mainScene = document.getElementById('mainScene');
    const introScreen = document.getElementById('introScreen');
    const enterVRButton = document.querySelector('.VRButton');
    const introText = document.getElementById('introText');
    const winningText = document.getElementById('winningText');
    const losingText = document.getElementById('losingText');
    const creditText = document.getElementById('creditText');
    const mainCamera = document.getElementById('camera');

    sceneEl.addEventListener('loaded', (event) => {
      // all game assets loaded
      introScreen.classList.remove('hidden');
    });
github teliportme / remixvr / themes / packages / lesson-theme / index.js View on Github external
AFRAME.scenes[0].appendChild(videoEl);
  return videoEl;
}

function createPhotoSphereSpace(photosphereUrl) {
  const sky = document.getElementById('sky');
  sky.setAttribute('material', 'src', API_ROOT + photosphereUrl);
}

function createVideoSphereSpace(videosphereUrl) {
  createVideoEl(API_ROOT + videosphereUrl);
  const videosphere = document.getElementById('videosphere');
  videosphere.setAttribute('src', '#video-element');
}

AFRAME.registerComponent('cursor-listener', {
  init: function() {
    if (this.el.id === 'start') {
      this.el.addEventListener('click', function(evt) {
        document.getElementById('info-board').setAttribute('visible', false);
      });
    } else if (this.el.id === 'next') {
      this.el.addEventListener('click', function() {
        AFRAME.scenes[0].emit('nextSpace');
      });
    } else if (this.el.id === 'previous') {
      this.el.addEventListener('click', function() {
        AFRAME.scenes[0].emit('previousSpace');
      });
    }
  }
});
github delapuente / aframe-sharedspace-component / src / components / avatars / index.js View on Github external
import { registerComponent, utils } from 'aframe';
import { SceneTree } from './scene-tree';
import { EntityObserver } from './entity-observer';

const bind = utils.bind;
const log = utils.debug('sharedspace:avatars:log');
const warn = utils.debug('sharedspace:avatars:warn');
const error = utils.debug('sharedspace:avatars:error');

export default registerComponent('avatars', {

  dependendies: ['sharedspace'],

  schema: {
    template: { type: 'selector', default: 'template' },
    placement: { type: 'string', default: 'position-around' },
    onmyself: { type: 'string', default: 'auto' },
    audio: { default: true },
    autoremove: { default: true }
  },

  init() {
    this._tree = new SceneTree(this.el);
    this._ongoingUpdates = [];
    this._incomingUpdates = [];
    this._collectToSend = bind(this._collectToSend, this);
github delapuente / aframe-sharedspace-component / src / components / sharedspace / index.js View on Github external
import { registerComponent, utils } from 'aframe';
import { Participation } from './participation';
import { panic } from '../../utils';

const bind = utils.bind;
const log = utils.debug('sharedspace:log');
const warn = utils.debug('sharedspace:warn');
const error = utils.debug('sharedspace:error');

export default registerComponent('sharedspace', {
  schema: {
    hold: { default: false },
    provider: { default: 'https://salvadelapuente.com:9000' },
    room: { default: 'room-101' },
    audio: { default: false },
    me: { default: '' }
  },

  update() {
    if (!this._initializing && !this._connected && !this.data.hold) {
      this._start();
    }
  },

  init() {
    this._connected = false;
github maxkrieger / aframe-draw-component / examples / main.js View on Github external
var AFRAME = require("aframe");
var drawComponent = require("../index.js").component;
AFRAME.registerComponent("draw", drawComponent);
AFRAME.registerComponent("square", {
	dependencies: ["draw"],
	init: function() {
		this.draw = this.el.components.draw;
		this.draw.register(this.render.bind(this));
	},
	update: function () {
		this.draw.render();
	},
	render: function () {
		var ctx = this.draw.ctx;
		ctx.fillStyle = this.data.color;
		ctx.fillRect(68, 68, 120, 120);
	}
});
github delapuente / aframe-sharedspace-component / src / components / onmyself / index.js View on Github external
import { registerComponent } from 'aframe';

export default registerComponent('onmyself', {
  schema: {
    share: { type: 'array', default: [] }
  }
});
github oscarmarinmiro / aframe-stereo-component / main.js View on Github external
var AFRAME = require('aframe');
var stereoComponent = require('../index.js').stereo_component;
var stereocamComponent = require('../index.js').stereocam_component;

AFRAME.registerComponent('stereo', stereoComponent);
AFRAME.registerComponent('stereocam', stereocamComponent);

require('aframe');
github oscarmarinmiro / aframe-stereo-component / main.js View on Github external
var AFRAME = require('aframe');
var stereoComponent = require('../index.js').stereo_component;
var stereocamComponent = require('../index.js').stereocam_component;

AFRAME.registerComponent('stereo', stereoComponent);
AFRAME.registerComponent('stereocam', stereocamComponent);

require('aframe');
github Kif11 / three-body / src / components / Mover.js View on Github external
import AFRAME from 'aframe';
const THREE = AFRAME.THREE;

const PENDULUM_POS = new THREE.Vector3(34, -1, -19);

AFRAME.registerComponent('mover', {
  schema: {
    speed: {
      type: 'int',
      default: 65
    }
  },

  init: function () {
    this.pressed = false;
    this.lastAxis = new THREE.Vector2();
    this.vrMovingSpeed = 0.0039;

    const rig = document.querySelector('#cameraRig');
    this.rig = rig.object3D;

    const camera = document.querySelector('#camera');