帮酷LOGO
  • 显示原文与译文双语对照的内容
A web framework for building multi-user virtual reality experiences.

  • 源代码名称:networked-aframe
  • 源代码网址:http://www.github.com/networked-aframe/networked-aframe
  • networked-aframe源代码文档
  • networked-aframe源代码下载
  • Git URL:
    git://www.github.com/networked-aframe/networked-aframe.git
  • Git Clone代码到本地:
    git clone http://www.github.com/networked-aframe/networked-aframe
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/networked-aframe/networked-aframe
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 网络 aframe

    Build StatusNPM versionNPM downloads

    Web 上的多用户 VR

    完全用HTML编写全功能多用户VR体验。

    建立在美妙的框架的基础上。

    ( 译): 功能 - 开始,-示例-- 文档-联系。

    特性

    • 包括创建多用户WebVR应用程序和游戏所需的一切。
    • 支持WebRTC和/或者 web socket连接。
    • 语音聊天。允许你的用户在应用程序( 仅 WebRTC ) 中进行聊天。
    • 带宽敏感仅在发生更改时发送网络更新。 进一步压缩网络数据包的选项。
    • 可以扩展。同步任何框架组件,包括你自己的组件,而不更改所有组件的代码。
    • 跨平台。适用于所有现代桌面和移动浏览器。 Oculus裂缝,HTC Vive和谷歌纸板+ Daydream支持。
    • Firebase WebRTC信号支持

    正在启动

    Remix on Glitch

    按照以下步骤,开始创建你自己的示例,包括建立本地服务器。

    要在你自己的电脑上运行示例:

    git clone https://github.com/networked-aframe/networked-aframe.git # Clone the repository.cd networked-aframe
    npm install && npm run easyrtc-install # Install dependencies.npm run dev # Start the local development server.

    在服务器运行时,浏览 http://localhost:8080 中的示例。 打开另一个浏览器选项卡并指向同一网址以查看其他客户端。

    有关如何在因特网上承载你的经验的信息,请参阅主机指南

    基本示例

    <html>
     <head>
     <title>My Networked-Aframe Scene</title>
     <scriptsrc="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
     <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
     <scriptsrc="easyrtc/easyrtc.js"></script>
     <scriptsrc="https://unpkg.com/networked-aframe/dist/networked-aframe.min.js"></script>
     </head>
     <body>
     <a-scenenetworked-scene>
     <a-assets>
     <templateid="avatar-template">
     <a-sphere></a-sphere>
     </template>
     </a-assets>
     <a-entityid="player"networked="template:#avatar-template;attachTemplateToLocal:false;"camerawasd-controlslook-controls>
     </a-entity>
     </a-scene>
     </body>
    </html>

    更多示例

    如果没有其他人在线,则在两个标签中打开。

    用联网的aframe做了一些了不起的事情? 让我知道,我将把它包括在这里

    文档

    概述

    联网aframe通过同步实体及其组件与已经连接的用户。 要连接到房间,需要将 networked-scene 组件添加到 a-scene 元素。 对于要同步的实体,向它的添加 networked 组件。 默认情况下,positionrotation 组件是同步的,但是如果你想要同步其他组件或者子组件,你需要定义一个模式。 有关网络消息的更多控制,请参见广播自定义消息选项的部分。

    场景组件

    在框架 <a-scene> 组件上需要。

    <a-scenenetworked-scene=" serverURL:/; app: <appId>; room: <roomName>; connectOnLoad: true; onConnect: onConnect; adapter: wseasyrtc; audio: false; debug: false;">
    . . .
    </a-scene>
    属性说明默认值
    serverURL选择 web socket/信令服务器所在的位置。/
    应用不允许使用唯一的应用程序 NAME 。默认值
    聊天室独特的房间 NAME 。每个应用可以是多个。 不允许使用空间。每个应用程序有多个房间,客户端只能连接到同一应用程序&房间中的客户端。默认值
    connectOnLoad网页载入后立即连接到服务器。true
    onConnect客户端成功连接到服务器时调用的函数。onConnect
    适配器你要使用的网络服务,请参阅适配器wseasyrtc
    音频打开/关闭你的应用程序的麦克风音频流。 仅在选择的适配器支持时才有效。false
    调试打开/关闭联网的aframe调试日志。false

    连接

    默认情况下,networked-scene 将自动连接到服务器。 为了避免这种情况,并控制什么时候连接,在 networked-scene 中将 connectOnLoad 设置为 false 。 准备连接时,在 a-scene 元素上打开 connect 事件。

    AFRAME.scenes[0].emit('connect');

    断开

    要断开连接,只需从 a-scene 元素中删除 networked-scene 组件。

    AFRAME.scenes[0].removeAttribute('networked-scene');

    从页面完全删除 a-scene 也将处理干净断开。

    创建联网实体

    <a-assets>
     <templateid="my-template">
     <a-entity>
     <a-spherecolor="#f00"></a-sphere>
     </a-entity>
     </template>
    <a-assets><!-- Attach local template by default --><a-entitynetworked="template: #my-template">
    </a-entity><!-- Do not attach local template --><a-entitynetworked="template:#my-template;attachTemplateToLocal:false">
    </a-entity>

    创建模板的实例,以便在客户端间同步。 默认情况下,位置和旋转将同步。 aframe-lerp-component 添加到允许 LESS 网络更新,同时保持流畅的运动。

    模板只能有一个 root 元素。 将 attachTemplateToLocal 设置为 true 时,这里元素上的属性将复制到本地实体,子元素将追加到本地实体中。 远程实例化实体将是模板的root 元素的副本,并将 networked 组件添加到该模板中。

    示例 attachTemplateToLocal=true
    <a-entitywasd-controlsnetworked="template:#my-template">
    </a-entity><!-- Locally instantiated as: --><a-entitywasd-controlsnetworked="template:#my-template">
     <a-spherecolor="#f00"></a-sphere>
    </a-entity><!-- Remotely instantiated as: --><a-entitynetworked="template:#my-template;networkId:123;">
     <a-spherecolor="#f00"></a-sphere>
    </a-entity>
    示例 attachTemplateToLocal=false
    <a-entitywasd-controlsnetworked="template:#my-template;attachTemplateToLocal:false;">
    </a-entity><!-- No changes to local entity on instantiation --><!-- Remotely instantiated as: --><a-entitynetworked="template:#my-template;networkId:123;">
     <a-spherecolor="#f00"></a-sphere>
    </a-entity>
    参数说明默认值
    模板存储在 <a-assets> 中的模板标记的css选择器''''
    attachTemplateToLocal设置为 false 时不附加本地用户的模板。 当本地和远程有不同的行为时,这很有用。true

    删除联网实体

    当前只有网络实体的创建者可以删除它。 要删除,只需使用常规的DOM api从HTML中删除元素,网络aframe就会自动处理同步。

    同步自定义组件

    默认情况下,root 实体上的positionrotation 组件将同步。

    若要同步子实体的其他组件和组件,你需要定义每个模板的架构。 下面是定义和添加架构的方法:

    NAF.schemas.add({
     template:'#avatar-template',
     components: [
     'position',
     'rotation',
     'scale',
     {
     selector:'.hairs',
     component:'show-child' },
     {
     selector:'.head',
     component:'material',
     property:'color' },
     ]
    });

    可以使用组件的NAME 来定义 root 实体的组件。 可以使用带有标准CSS选择器的对象定义子实体的组件,该对象使用标准CSS选择器,而 component 字段则指定组件的NAME 。 若要同步多个属性组件的一个属性,请使用属性的NAME 添加 property 字段。

    定义架构之后,通过调用 NAF.schemas.add(YOUR_SCHEMA) 将它的添加到模式列表中。

    组件数据由框架组件 data 属性检索。 在网络中,每个组件的数据都会根据它的先前的同步值检查;如果数据对象在网络上同步。

    同步嵌套模板- 例如。 手

    要同步嵌套模板,请像这样设置你的HTML节点:

    <a-entityid="player"networked="template:#player-template;attachTemplateToLocal:false;"wasd-controls>
     <a-entitycameralook-controlsnetworked="template:#head-template;attachTemplateToLocal:false;"></a-entity>
     <a-entityhand-controls="left"networked="template:#left-hand-template"></a-entity>
     <a-entityhand-controls="right"networked="template:#right-hand-template"></a-entity>
    </a-entity>

    在这个示例中,头部/摄像机。左右手将生成自己的模板,这些模板将独立于 root 播放器进行联网。 注意:父级子关系只在一个级别,IE 。 实体父级的子对象必须具有 networked 组件。

    发送自定义消息

    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 函数。

    参数说明
    宋体将这里数据发送到
    数据类型标识网络消息的字符串。 u 是保留数据类型,请不要使用它
    回拨收到 dataType 类型的消息时调用的函数。 参数:函数( senderId,数据类型,数据,targetId )
    数据要发送到所有其他客户端的对象

    传输实体所有权

    实体的所有者负责同步它的组件数据。 用户想要修改用户的另一个实体时,必须首先取得该实体的所有权。 这个例子展示了如何取得实体所有权并更新它。

    NAF.utils.takeOwnership(entityEl)

    取得实体的所有权。

    NAF.utils.isMine(entityEl)

    检查你是否拥有指定的实体。

    事件

    当NAF中发生某些事情时触发事件。 要订阅这些事件,请遵循以下 Pattern:

    document.body.addEventListener('clientConnected', function (evt) {
     console.error('clientConnected event. clientId =', evt.detail.clientId);
    });

    创建 document.body 元素后需要订阅事件。 通过等待 document.body onLoad 方法或者使用naf函数的onConnect 来实现这一点。 使用事件演示插件作为示例。

    事件列表:

    事件描述值
    clientConnected当另一个客户端连接到你时激发连接客户端的evt.detail.clientId
    clientDisconnected当另一个客户端与你断开连接时激发evt.detail.clientId - 断开客户端的连接
    entityCreated在创建联网实体时激发evt.detail.el - 新实体
    entityDeleted在删除网络实体时激发evt.detail.networkId - 已经删除实体的networkId

    networked 组件上激发了以下事件。 参见切换所有权组件示例。

    所有权转移事件列表:

    事件描述值
    获得的所有权在获取实体的网络所有权时激发evt.detail.el - 获得它的所有权的实体
    evt.detail.oldOwner - 前一个所有者的clientId
    所有权丢失当实体的网络所有权丢失时激发evt.detail.el - 它的所有权丢失的实体
    evt.detail.newOwner - 新所有者的clientId
    所有权已经更改当更改实体的网络所有权时激发evt.detail.el - 它的所有权丢失的实体
    evt.detail.oldOwner - 前一个所有者的clientId
    evt.detail.newOwner - 新所有者的clientId

    适配器

    NAF可以与多个网络库和服务一起使用。 适配器是将对库的支持添加到NAF的类。 如果你只是侵入一个小项目或者概念证明,你可以能会在缺省配置,你可以以跳过这部分。 评估不同适配器时应考虑的问题包括:

    • 你需要在一个房间中支持多少个并发用户?
    • 是否要托管自己的服务器? 或者像Firebase这样的"无服务器"解决方案会做?
    • 你需要音频( 麦克风) 流媒体?
    • 是否需要自定义服务器端逻辑?
    • 你想要 web socket ( 客户端服务器) 网络架构还是 WebRTC ( peer-to-peer )?

    我很快就会在这些问题的答案上写上一个帖子,( 如果你感兴趣的话,请把我叫 Bug ) 。

    默认情况下使用 wsEasyRtc 适配器,它是仅使用 web socket连接的开放源代码 EasyRTC库的一个实现。 要快速尝试WebRTC而不是 web sockets,请将适配器更改为 easyrtc,它还支持音频。 如果你有兴趣为a 提供一个非常好的机会,就可以以添加对更多适配器的支持并。

    支持的适配器列表:

    适配器描述支持音频 web sockets或者WebRTC如何启动
    wsEasyRTC默认- EasyRTC 只使用 web socket连接不是web socketsnpm run start
    EasyRTCEasyRTC是的WebRTCnpm run start
    uWS自定义的uWebSockets 实现不是web sockets请参见 naf-uws-adapter
    Firebase用于WebRTC信号的Firebase不是WebRTC请参见 naf-firebase-adapter
    Deepstream用于WebRTC信号的DeepstreamHub不是WebRTC请参见 naf-deepstream-adapter

    音频

    audio: true 添加到 networked-scene 组件( 并使用支持它的适配器) 后,默认情况下不会听到任何音频。 尽管音频将是流式的,但在创建一个具有 networked-audio-source的实体之前,它将不会被听到。 来自这里实体所有者的音频将从该实体的位置发出 3d 个空间。 必须使用 networked 组件将 networked-audio-source 组件添加到实体( 或者实体的子元素) 中。

    要快速开始,请尝试故障NAF音频示例

    NAF.connection.isConnected()

    如果已经建立了信号服务器的连接,则返回 true 。

    NAF.connection.getConnectedClients()

    返回当前连接的客户端的列表。

    命令行选项

    NAF.options.updateRate

    每秒调用网络组件 sync 函数的频率。 10 -20对于大多数社交虚拟现实应用来说是正常的。 默认值为 15

    NAF.options.useLerp

    默认情况下,当实体创建 aframe-lerp-component 插件时,附加到平滑位置和旋转网络更新。 如果你不希望在创建时附加lerp组件,则将这里设置设置为 false 。

    NAF.options.compressSyncPackets

    将每个同步包压缩为最小化但更难读取的JSON对象以节省带宽。 默认值为 false

    要测量带宽使用情况,请在 Chrome 上运行两个客户端并访问 chrome://webrtc-internals

    保持联络

    帮助和更多信息

    文件夹结构

    • /(root)
      • 许可证和软件包信息
    • /dist/
      • 用于部署的打包源代码
    • /server/
      • 服务器代码
    • /server/static/
      • 范例
    • /src/
      • 客户端源代码
    • /tests/
      • 单元测试

    路线图

    对贡献感兴趣给我一个消息,或者发送一个请求请求。

    警告警告

    nodejs版本 7.2.0不支持 NAF 。 请使用不同版本的nodejs 。

    许可证

    程序是免费软件,并发布在一个 MIT许可证。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语