Aframe-react how to register and use custom component?

Question

I would like to register a Aframe-component in Aframe-react; i usually do it AFRAME.registerComponent('leftcamera',{...}); and then use it in Html straight away, but cannot really understand how to do it in proper react way.

The app is bootstrapped with create-react-app, and reading around i found maybe is about webpack bundle.js not accessible without eject.

in Chrome-inspector:

App.js:4 Uncaught Error: Cannot find module "./viz"
at webpackMissingModule (App.js:4)
at Object.<anonymous> (App.js:4)
at __webpack_require__ (bootstrap b7779078638c88d24628:555)
at fn (bootstrap b7779078638c88d24628:86)
at Object.<anonymous> (index.js:4)
at __webpack_require__ (bootstrap b7779078638c88d24628:555)
at fn (bootstrap b7779078638c88d24628:86)
at Object.<anonymous> (bootstrap b7779078638c88d24628:578)
at __webpack_require__ (bootstrap b7779078638c88d24628:555)
at bootstrap b7779078638c88d24628:578

On the Aframe discord channel ngoKevin told me to just require the component.

this is the component, i would like to be able to see 4 cameras in the sidebar as spectator plus the main active camera, this code is for just one camera, the left one

const AFRAME = window.AFRAME;
const THREE = require('aframe/src/lib/three');
/*register left camera component */
AFRAME.registerComponent('leftcamera',{
  'schema': {
    canvas: {
      type: 'string',
      default: '#cameraleft;'
    },
    // desired FPS of spectator display
    fps: {
      type: 'number',
      default: '10.0'
    }
  },
  'init': function() {
    var targetEl = document.querySelector(this.data.canvas)
    this.counter = 0;
    this.renderer = new THREE.WebGLRenderer( { antialias: true } );
    this.renderer.setPixelRatio( window.devicePixelRatio );
    this.renderer.setSize( targetEl.offsetWidth, targetEl.offsetHeight );
    // creates spectator canvas
    targetEl.appendChild(this.renderer.domElement);
  },

  'tick': function(time, timeDelta) {
    var loopFPS = 1000.0 / timeDelta;
    var hmdIsXFasterThanDesiredFPS = loopFPS / this.data.fps;
    var renderEveryNthFrame = Math.round(hmdIsXFasterThanDesiredFPS);
    if(this.counter % renderEveryNthFrame === 0){
      this.render(timeDelta);
    }
    this.counter += 1;  
  },

  'render': function(){
    this.renderer.render( this.el.sceneEl.object3D , this.el.object3DMap.camera );
    console.log('====================================');
    console.log('here &');
    console.log('====================================');
  }
}
);

my flex layout

I posted the code on glitch if you would like to have a look

----> https://aframe-spectator-sideview.glitch.me

This importing from the js file and using it on an HTML (tried straight html to understand, from react-aframe also works obvs)

-import and register

import leftcamera from './leftCamera.js';
register leftcamera(AFRAME);
import 'aframe';
import aframe from 'aframe';
import {Entity, Scene} from 'aframe-react';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

Any hint or help would be mush appreciated!

Thank you in advance!

Answer 1

thanks for the detailed code and Glitch!

require('aframe');
require('./yourAframeComponent');

Where yourAframeComponent.js locally would contain:

AFRAME.registerComponent('...', {});

And note that the components needed to be registered before the HTML is attached. If that is via React, then that means before React renders. If static HTML, that means the script tag needs to go before the HTML, or wait for DOM ready.

A-Frame React Boilerplate shows requiring components. In your case, the component would be required locally; https://github.com/ngokevin/aframe-react-boilerplate/blob/master/src/index.js