货源网站程序,重庆seo排名外包,南通企业建设网站电话,潍坊网站建设 选聚搜网络1.概述
Networked-Aframe 的工作原理是将实体及其组件同步到连接的用户。要连接到房间#xff0c;您需要将networked-scene组件添加到a-scene元素。对于要同步的实体#xff0c;请向其添加networked组件。默认情况下#xff0c;position和rotation组件是同步的#xff0c;…1.概述
Networked-Aframe 的工作原理是将实体及其组件同步到连接的用户。要连接到房间您需要将networked-scene组件添加到a-scene元素。对于要同步的实体请向其添加networked组件。默认情况下position和rotation组件是同步的但如果您想同步其他组件或子组件则需要定义架构。有关网络消息的更高级控制请参阅广播自定义消息和选项部分。 2.场景组件
A-Framea-scene上的组件。
a-scene networked-sceneserverURL: /;app: appId;room: roomName;connectOnLoad: true;onConnect: onConnect;adapter: wseasyrtc;audio: false;video: false;debug: false;
...
/a-scene 属性 描述 默认值 serverURL 选择 WebSocket/信令服务器所在的位置。 / app 唯一的应用程序名称。不允许有空格。 default room 独特的房间名称。每个应用程序可以有多个。不允许有空格。每个应用程序可以有多个房间客户端只能连接到同一应用程序和房间中的客户端。 default connectOnLoad 网页加载后立即连接到服务器。 true onConnect 当客户端成功连接到服务器时调用的函数。 onConnect adapter 您要使用的网络服务请参阅适配器。 wseasyrtc audio 打开/关闭您的应用程序的麦克风音频流。仅当所选适配器支持时才有效。 false video 打开/关闭您的应用程序的视频流。仅当所选适配器支持时才有效。 false debug 打开/关闭 Networked-Aframe 调试日志。 false 3.连接
默认情况下networked-scene将自动连接到您的服务器。为了防止这种情况发生并控制何时连接请在networked-scene中将connectOnLoad设置为 false。当您准备好连接时会在a-scene元素上发出connect事件。
AFRAME.scenes[0].emit(connect);
4.断开连接
要断开连接只需从a-scene元素中删除networked-scene组件即可。
AFRAME.scenes[0].removeAttribute(networked-scene);
从页面中完全删除a-scene也可以彻底断开连接。
5.创建网络实体
a-assetstemplate idmy-templatea-entitya-sphere color#f00/a-sphere/a-entity/template
/a-assets!-- Attach local template by default --
a-entity networkedtemplate: #my-template
/a-entity!-- Do not attach local template --
a-entity networkedtemplate:#my-template;attachTemplateToLocal:false
/a-entity
创建要在客户端之间同步的模板实例。默认情况下位置和旋转将同步。buffered-interpolation库用于允许更少的网络更新同时保持平滑的运动。
模板只能有一个根元素。当attachTemplateToLocal设置为true时该元素上的属性将被复制到本地实体并且子元素将被附加到本地实体。远程实例化的实体将是模板根元素的副本并添加了networked组件。
1attachTemplateToLocaltrue示例
a-entity wasd-controls networkedtemplate:#my-template
/a-entity!-- Locally instantiated as: --
a-entity wasd-controls networkedtemplate:#my-templatea-sphere color#f00/a-sphere
/a-entity!-- Remotely instantiated as: --
a-entity networkedtemplate:#my-template;networkId:123;a-sphere color#f00/a-sphere
/a-entity
2attachTemplateToLocalfalse示例
a-entity wasd-controls networkedtemplate:#my-template;attachTemplateToLocal:false;
/a-entity!-- No changes to local entity on instantiation --!-- Remotely instantiated as: --
a-entity networkedtemplate:#my-template;networkId:123;a-sphere color#f00/a-sphere
/a-entity 属性 描述 默认值 template 存储在a-assets中的模板标签的 css 选择器 ” attachTemplateToLocal 设置为 false 时不附加本地用户的模板。当本地和远程存在不同行为时这非常有用。 true persistent 在远程创建者而非所有者断开连接时尝试获取持久实体的所有权而不是删除它们 false
6.删除网络实体
目前只有网络实体的创建者可以删除它。要删除只需使用常规 DOM API 从 HTML 中删除元素Networked-Aframe 将自动处理同步。
7.同步自定义组件
默认情况下根实体上的position和rotation组件是同步的。
要同步其他组件和子实体的组件您需要为每个模板定义一个架构。以下是定义和添加架构的方法
NAF.schemas.add({template: #avatar-template,components: [position,rotation,scale,{selector: .hairs,component: show-child},{selector: .head,component: material,property: color},]
});
根实体的组件可以用组件的名称来定义。子实体的组件可以使用具有selector字段和component字段的对象来定义该字段使用document.querySelector使用的标准 CSS 选择器它指定组件的名称。要仅同步多属性组件的一个属性请添加带有属性名称的property字段。
定义架构后通过调用NAF.schemas.add(YOUR_SCHEMA)将其添加到架构列表中。
组件数据由 A-Frame 组件data属性检索。在网络更新期间每个组件的数据都会根据其之前的同步值进行检查如果数据对象发生了任何变化它将通过网络同步。
8.同步组件优化
对于每个组件您可以定义一个requiresNetworkUpdate函数该函数采用当前值如果当前值较之前值发生更改则返回 true。如果当前值和先前值足够接近您可以返回 false以免将此更改发送给其他参与者。
默认情况下当您未定义它时它始终使用defaultRequiresUpdate函数在networked.js顶部定义该函数使用通用deepEqual函数来将当前值与前一个值进行比较当两个值不同时使用cachedData AFRAME.utils.clone(newData);以保留前一个值以供下次比较。AFRAME.utils.clone实现正做JSON.parse(JSON.stringify(obj))可以与任何类型一起使用但这可能不是 Vector3 类型如位置、旋转、缩放的最佳性能实现。
只是为了让你知道这是在做什么 const v new THREE.Vector3(1,2,3);
Vector3 {x: 1, y: 2, z: 3}JSON.parse(JSON.stringify(v))
{x: 1, y: 2, z: 3}
因此如果值发生变化每次同步过程完成时都会在内存中创建一个新对象这些对象会在某一时刻被垃圾收集。如果场景很重垃圾收集通常可能需要 1 毫秒或更长的时间结果可能是浏览器丢掉一些帧因此没有一致的 fps。您可以使用 Chrome 分析器来确认这一点。对于移动的头像来说这一点几乎不会被注意到但如果用户拥有大量连续移动的对象这对于您的用例可能很重要。
此外使用当前的 aframewasd-controls实现以及位置平滑方式在用户停止按键后 2 秒玩家位置的变化仍然低于毫米精度因此通过网络发送大量 NAF 消息视觉上不易察觉的位置变化。 NAF 已经包含位置插值来平滑接收到的位置变化因此通过网络发送所有这些位置变化甚至是多余的。
您可以使用专用函数来比较给定精度的两个 Vector3通过避免创建新对象通过网络和内存发送更少的消息来实现更好的性能
const vectorRequiresUpdate epsilon {return () {let prev null;return curr {if (prev null) {prev new THREE.Vector3(curr.x, curr.y, curr.z);return true;} else if (!NAF.utils.almostEqualVec3(prev, curr, epsilon)) {prev.copy(curr);return true;}return false;};};
};
这个函数实际上是在NAF.utils.vectorRequiresUpdate中定义的供你使用。
要在网络模式中使用它以获得 1 毫米的位置精度和 0.5 度的旋转精度请按如下方式使用
{template: #avatar-template,components: [{component: position,requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)},{component: rotation,requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)}]
}
从0.11.0版本开始同步位置和旋转的默认模式使用上述优化。
9.同步嵌套模板 - 例如手
要同步嵌套模板请像这样设置 HTML 节点
a-entity idplayer networkedtemplate:#player-template;attachTemplateToLocal:false; wasd-controlsa-entity camera look-controls networkedtemplate:#head-template;attachTemplateToLocal:false;/a-entitya-entity hand-controlshand:left networkedtemplate:#left-hand-template/a-entitya-entity hand-controlshand:right networkedtemplate:#right-hand-template/a-entity
/a-entity
在此示例中头部/摄像头、控制器的左手和右手将生成自己的模板这些模板将独立于根玩家进行联网。注意这与当前不支持的手部追踪无关。这种父子关系仅在一个级别之间有效即。子实体的直接父实体必须具有networked组件。
您需要自己定义左手和右手模板以便向其他用户显示手部模型。只有位置和旋转会同步给其他用户。要同步手势请参阅下面的networked-hand-controls组件。
10.带同步手势的跟踪控制器
这是比上述更简单的替代方案。 NAF 允许轻松添加其他人可见的手部模型这些模型显示与触摸的按钮相匹配的模拟手势不是手部跟踪这样您就可以向房间里的其他人指向并竖起大拇指或握拳。
您所要做的就是使用内置的networked-hand-controls组件将这两个实体添加为相机装备的子级
a-entityidmy-tracked-left-handnetworked-hand-controlshand:leftnetworkedtemplate:#left-hand-default-template
/a-entity
a-entityidmy-tracked-right-handnetworked-hand-controlshand:rightnetworkedtemplate:#right-hand-default-template
/a-entity
您可以设置的公共架构属性有 属性 描述 默认值 取值范围 color 将被设置为材质颜色 white hand 指定实体是用于左手还是右手 left left, right handModelStyle A-Frame中可用的内置模型 highPoly highPoly, lowPoly, toon, controller customHandModelURL 可选的自定义手模型网址 请注意“控制器”选项——它将使用控制器本身的模型根据您的平台自动正确设置——它还将广播模型支持的按钮网格更新。 不幸的是Quest 2 模型按钮网格目前存在一个错误因此不会显示任何更新。
networked-hand-controls正在完全替换hand-controls不要同时使用两者。如果您使用如上所述的网络组件则无需为每只手定义模板和网络架构。默认模板和网络模式已定义如下
template idleft-hand-default-templatea-entity networked-hand-controlshand:left/a-entity
/template
template idright-hand-default-templatea-entity networked-hand-controlshand:right/a-entity
/template
NAF.schemas.add({template: #left-hand-default-template,components: [{component: position,requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)},{component: rotation,requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)},networked-hand-controls]
});
NAF.schemas.add({template: #right-hand-default-template,components: [{component: position,requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)},{component: rotation,requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)},networked-hand-controls]
});
11.发送自定义消息
NAF.connection.subscribeToDataChannel(dataType, callback)
NAF.connection.unsubscribeToDataChannel(dataType)NAF.connection.broadcastData(dataType, data)
NAF.connection.broadcastDataGuaranteed(dataType, data)NAF.connection.sendData(clientId, dataType, data)
NAF.connection.sendDataGuaranteed(clientId, dataType, data)
订阅和取消订阅dataType指定的网络消息的回调。使用broadcastData功能向房间内的所有客户端广播数据。要仅发送到特定客户端请改用sendData函数。 参数 描述 clientId 将此数据发送到的 ClientId dataType 用于标识网络消息的字符串。u更新、umUpdateMulti和r删除是保留数据类型请不要使用它们 callback 收到类型dataType的消息时调用的函数。参数function(senderId, dataType, data, targetObj)使用 easyrtc 适配器targetObj在广播消息时可以是{targetRoom: roomId}或者在向特定参与者发送消息时可以是{targetEasyrtcid: targetId}。对于 janus 适配器senderId 始终为 null并且targetObj更多的是source参数通常等于“janus-event”。 data 要发送给所有其他客户端的对象 12.转让实体所有权
实体的所有者负责同步其组件数据。当用户想要修改另一个用户的实体时他们必须首先获得该实体的所有权。所有权转移示例和切换所有权组件展示了如何获取实体的所有权并更新它。
NAF.utils.takeOwnership(entityEl)
取得实体的所有权。
NAF.utils.isMine(entityEl)
检查您是否拥有指定实体。
13.事件
当 NAF 中发生某些事情时事件就会被触发。要订阅这些事件请遵循以下模式
document.body.addEventListener(clientConnected, function (evt) {console.error(clientConnected event. clientId , evt.detail.clientId);
});
创建document.body元素后需要订阅事件。这可以通过等待document.bodyonLoad方法或使用 NAF 的onConnect函数来实现。使用 NAF 活动演示作为示例。
事件列表 事件 描述 取值范围 clientConnected 当另一个客户端连接到您时触发 evt.detail.clientId- 连接客户端的ClientId clientDisconnected 当另一个客户端与您断开连接时触发 evt.detail.clientId- 断开连接的客户端的ClientId entityCreated 创建网络实体时触发 evt.detail.el- 新实体 entityRemoved 删除网络实体时触发 evt.detail.networkId- 已删除实体的网络ID
以下事件在networked组件上触发。有关示例请参阅切换所有权组件。
所有权转让事件列表 事件 描述 参数范围 ownership-gained 当网络实体的所有权被夺取时触发 evt.detail.el- 获得所有权的实体 evt.detail.oldOwner- 前任所有者的 clientId ownership-lost 当网络实体的所有权丢失时触发 evt.detail.el- 失去所有权的实体 evt.detail.newOwner- 新所有者的 clientId ownership-changed 当网络实体的所有权更改时触发 evt.detail.el- 失去所有权的实体 evt.detail.oldOwner- 前任所有者的 clientId evt.detail.newOwner- 新所有者的 clientId
14.适配器
NAF 可与多个网络库和服务一起使用。适配器是一个向 NAF 添加对库的支持的类。如果您只是在开发一个小项目或概念验证那么您可能会使用默认配置并且可以跳过本节。评估不同适配器时应考虑的因素包括 一间房间需要支持多少个并发用户 您想托管自己的服务器吗或者像 Firebase 这样的“无服务器”解决方案可以完成这项工作吗 您需要音频麦克风流吗 您需要自定义服务器端逻辑吗 您想要 WebSocket客户端-服务器网络架构还是 WebRTC点对点网络架构
默认情况下使用wseasyrtc适配器它不支持音频并使用 TCP 连接。这对于生产部署来说并不理想但是由于 WebRTC 固有的连接问题我们将其设置为默认值。要通过 WebRTC 支持音频请确保服务器使用 https 并将适配器更改为easyrtc这使用 UDP。
支持的适配器列表 适配器 描述 音频/视频支持情况 基于WebSocket 或 WebRTC 如何启动 wseasyrtc 默认 - 使用 open-easyrtc 库 No WebSocket npm run dev easyrtc 使用 open-easyrtc 库 音频和视频相机和屏幕共享 WebRTC npm run dev janus 使用 Janus WebRTC 服务器和 janus-plugin-sfu 音频和视频相机或屏幕共享 WebRTC 参阅 naf-janus-adapter socketio 无需外部库的 SocketIO 实现服务器支持房间实例化 No WebSocket npm run dev-socketio webrtc 无需外部库的原生 WebRTC 实现正在进行中目前没有维护者 音频 WebRTC npm run dev-socketio Firebase 用于 WebRTC 信号传输的 Firebase目前没有维护者 No WebRTC 参阅 naf-firebase-adapter uWS uWebSockets 的实现目前没有维护者 No WebSocket 参阅 naf-uws-adapter
表中的 WebRTC 表示组件更新使用 WebRTC 数据通道 (UDP)而不是 WebSocket (TCP)。您仍然有一个用于信令部分的 WebSocket。
更为详细比较请参阅文档 NAF 适配器比较。
15.音频
将audio: true添加到networked-scene组件并使用支持它的适配器后默认情况下您将听不到任何音频。尽管音频将进行流式传输但在创建具有networked-audio-source的实体之前它是听不到的。来自该实体所有者的音频将从该实体的位置在 3D 空间中发出。networked-audio-source组件必须与networked组件一起添加到实体或实体的子实体。
要使麦克风静音/取消静音您可以使用以下 APIeasyrtc 和 janus 适配器
NAF.connection.adapter.enableMicrophone(enabled)
其中enabled是true或false。
16.视频
将video: truejanus 适配器不需要添加到networked-scene组件并使用支持它的适配器后默认情况下您将看不到任何视频。尽管视频将进行流式传输但在创建使用带有networked-video-source的网格例如a-plane的实体之前它是不可见的。来自该实体所有者的视频将在 3D 空间中从该实体的位置可见。networked-video-source组件必须添加到具有networked组件的实体的a-plane子实体中。
目前这仅适用于支持getMediaStream(clientId, typevideo)API 的 easyrtc 和 janus 适配器。
请参阅该示例显示了没有音频的用户摄像头。
要禁用/重新启用相机您可以使用以下 API仅限 easyrtc 适配器
NAF.connection.adapter.enableCamera(enabled)
其中enabled是true或false。
使用 easyrtc 适配器您可以使用addLocalMediaStream和removeLocalMediaStreamAPI 添加额外的视频轨道例如屏幕共享
navigator.mediaDevices.getDisplayMedia().then((stream) {NAF.connection.adapter.addLocalMediaStream(stream, screen);
});NAF.connection.adapter.removeLocalMediaStream(screen);
请参阅多流示例该示例使用带有networked-video-sourcestreamName: screen的第二个平面向其他参与者显示屏幕共享。请务必查看此示例 html 文件末尾的注释以了解已知问题。
17.杂项
NAF.connection.isConnected()
如果已与信令服务器建立连接则返回 true。
NAF.connection.getConnectedClients()
返回当前连接的客户端列表。
18.选项
NAF.options.updateRate
每秒调用网络组件sync函数的频率。对于大多数社交 VR 应用程序来说10-20 是正常的。默认为15。
NAF.options.useLerp
默认情况下当创建实体时buffered-interpolation库用于平滑位置、旋转和缩放网络更新。如果您不希望在创建时使用此功能请将其设置为 false。
19.离线使用
NAF 已经包含 easyrtc因此运行npm run dev将提供完全有效的解决方案而无需访问外部服务器。不过这些示例确实依赖于 AFrame 和其他未与 NAF 打包的依赖项。因此必须首先使 AFrame 适应离线工作然后对所有其他组件执行相同的操作。这基本上可以归结为下载所使用的脚本及其内容例如 3D 模型、字体等资产。建议在网络控制台打开时加载页面并识别哪些请求来自主机外部。
对于 VR您还需要 https因为浏览器需要它才能实现沉浸式模式。server/easyrtc-server.js文件中提供了说明。也就是说您必须生成密钥和证书将它们添加到本地 CA然后通过 NAF 提供的 Express 服务器加载它们。确保在server/easyrtc-server.js顶部正确配置并按照说明通过https.createServer进一步向下启用 https 本身。一旦您连接到 VR 中的 NAF 服务器浏览器仍然会抱怨证书未知。您可以单击高级并继续。
