我正在使用Networked-aframe和Aframe-react构建“基本”场景。经过大量的解决方法后,我终于使服务器开始工作,该服务器通过自定义脚本加载react-app的“构建”版本
npm run customrun
这样做-
npm run build && node ./node_modules/networked-aframe/server/easyrtc-server.js
在 localhost:8080
主要问题是实体(即“球形”实体)未在加载环境中显示。
我认为这可能是因为在react的JSX中使用了“模板”标签,因此我通过使用辅助函数来找到了这种方式。解决但没有成功。
在控制台中输入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上打开多个选项卡)时,它应该在场景中显示“球形”实体。