Aframe-реакция, как зарегистрироваться и использовать пользовательский компонент? - PullRequest
Новая
       21

Aframe-реакция, как зарегистрироваться и использовать пользовательский компонент?

0 голосов
/ 08 декабря 2018

Я хотел бы зарегистрировать Aframe-компонент в Aframe-реагировать;я обычно делаю это AFRAME.registerComponent ('leftcamera', {...});а затем сразу же использовать его в Html, но не могу понять, как это сделать правильно.

Приложение загружается с помощью create-реагировать на приложение, и чтение, которое я нашел, возможно, связано с пакетом веб-пакетов.js не доступен без извлечения.

в 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

На канале разногласий Aframe ngoKevin сказал мне, чтобы я просто потребовал компонент.

это компонент, я хотел бы иметь возможность видеть 4 камеры на боковой панели в качестве зрителя плюс основную активную камеру, этот код предназначен только для одной камеры, левой 

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('====================================');
  }
}
);

мой гибкий макет

Я отправил код на глюк, если вы хотите посмотреть

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

Это импорт из файла js и использование его в HTML (пробовал прямо в html, чтобы понять, изact-aframe также работает obvs)

-импорт и регистрация 

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';

Любая подсказка или помощь будут приветствоваться!

Спасибоой заранее!

1 Ответ

0 голосов
/ 09 декабря 2018

спасибо за подробный код и Glitch! 

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

Где yourAframeComponent.js локально будет содержать: 

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

И обратите внимание, что компоненты необходимо было зарегистрировать до HTML прилагается.Если это через React, то это означает, что до того, как React рендерится.Если используется статический HTML, это означает, что тег сценария должен идти перед HTML или ждать готовности DOM.

A-Frame React Boilerplate показывает требуемые компоненты.В вашем случае компонент потребуется локально;https://github.com/ngokevin/aframe-react-boilerplate/blob/master/src/index.js

...