即使按照JSON的说明进行连接,Network-Aframe客户端也不会出现

时间:2019-04-18 09:40:59

标签: javascript reactjs aframe virtual-reality webvr

我正在使用Networked-aframe和Aframe-react构建“基本”场景。经过大量的解决方法后,我终于使服务器开始工作,该服务器通过自定义脚本加载react-app的“构建”版本     npm run customrun 这样做-

npm run build && node ./node_modules/networked-aframe/server/easyrtc-server.js

localhost:8080

主要问题是实体(即“球形”实体)未在加载环境中显示。

  1. 我认为这可能是因为在react的JSX中使用了“模板”标签,因此我通过使用辅助函数来找到了这种方式。解决但没有成功。

  2. 在控制台中输入NAF.connection.getConnectedClients()以JSON格式显示已连接的客户端,该客户端是通过打开localhost:8080的多个选项卡创建的

import React from 'react'
import ReactDOM from 'react-dom'
import 'aframe'
import { Entity, Scene } from 'aframe-react'
import 'aframe-environment-component'
import 'networked-aframe'

function Template({ children, ...attrs }) {
  return (
    <template
      {...attrs}
      dangerouslySetInnerHTML={{ __html: children }}
    />
  );
}

class App extends React.Component {
    render() {
        return (<div>
      <Scene environment="preset: yavapai;" networked-scene={{
        serverURL: 'http://localhost:8080/',
        connectOnLoad: true,
        onConnect: 'onConnect',
        adapter: 'wseasyrtc',
        audio: false,
        debug: false
      }}>
      <Template id="avatar-template">
           <div><Entity primitive="a-sphere" color="#f00"></Entity></div>
      </Template>
        <Entity id="player" networked={{template: '#avatar-template',attachTemplateToLocal:false}} spawn-in-circle={{radius:3}} wasd-controls look-controls>
      </Entity>
      </Scene></div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

当本地主机上有多个连接(或者我在同一URL上打开多个选项卡)时,它应该在场景中显示“球形”实体。

基本场景:-https://haydenlee.io/networked-aframe/basic.html

0 个答案:

没有答案