害怕反应如何注册和使用自定义组件

Question

我想在Aframe-rect中注册一个Aframe组件；我通常做AFRAME.registerComponent('leftcamera'，{…}(；然后直接在Html中使用，但无法真正理解如何以正确的反应方式进行操作。

该应用程序是用create-rect应用程序引导的，我四处阅读发现可能是关于webpack bundle.js的，如果不弹出，就无法访问。

在Chrome检查器中：

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来理解，从react 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';

任何提示或帮助都将不胜感激！

提前谢谢！

Answer 1

感谢您提供的详细代码和Glitch！

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

其中yourAframeComponent.js本地将包含：

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

请注意，在附加HTML之前，组件需要注册。如果是通过React，那么这意味着在React渲染之前。如果是静态HTML，则意味着脚本标记需要位于HTML之前，或者等待DOM就绪。

A-Frame React锅炉板显示需要组件。在您的情况下，本地需要该组件；https://github.com/ngokevin/aframe-react-boilerplate/blob/master/src/index.js