0

我想在 Aframe-react 中注册一个 Aframe-component；我通常这样做 AFRAME.registerComponent('leftcamera',{...}); 然后立即在 Html 中使用它，但无法真正理解如何以正确的反应方式进行操作。

该应用程序是使用 create-react-app 引导的，并且阅读我发现可能是关于 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 discord 频道上，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';

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

先感谢您！

4

1 回答 1

2

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

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

于 2018-12-09T06:07:37.677 回答