【整体介绍】HTML和JS编写多用户VR应用程序的框架

一、Networked-Aframe是什么?

简称NAF,底层基于Mozilla的AFrame框架,用HTML和JS编写多用户VR应用程序的框架。

二、特性

  • 支持 WebRTC 和/或 WebSocket 连接。

  • 语音聊天。音频流让您的用户在应用程序内交谈(仅限 WebRTC)。

  • 视频聊天。在应用程序内查看视频流。

  • 带宽敏感。仅在情况发生变化时发送网络更新。

  • 适用于所有现代桌面和移动浏览器。 Oculus Rift、Oculus Quest、HTC Vive 和 Google Cardboard。

  • 可扩展。同步任何 A-Frame 组件,包括您自己的组件,而无需更改组件代码。

三、入门

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

在服务器运行的情况下,浏览 http://localhost:8080 处的示例。打开另一个浏览器选项卡并将其指向相同的 URL 以查看另一个客户端。

四、示例

<html><head><title>My Networked-Aframe Scene</title><script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.5.0/socket.io.slim.js"></script><script src="/easyrtc/easyrtc.js"></script><script src="https://unpkg.com/networked-aframe@^0.12.0/dist/networked-aframe.min.js"></script></head><body><a-scene networked-scene><a-assets><template id="avatar-template"><a-sphere></a-sphere></template></a-assets><a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" camera wasd-controls look-controls></a-entity></a-scene></body>
</html>

如果没有其他人在线,请在两个选项卡中打开

  • Basic

  • Basic with 4 clients

  • Positional Audio

  • Video Streaming

  • Nametags

  • Tracked Controllers

  • More...

更完整的例子:

  • Nametags with UI in SolidJS/Tailwind CSS(GitHub)

  • Realistic animated avatars with UI to choose your avatar(GitHub)

未更新至最新版本:

  • Dynamic Room Name

  • Form to set room and userna

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3248105.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

AV1技术学习: Compound Prediction

一、双向 Compound Prediction AV1支持两个参考帧的预测通过多种复合模式线性组合。复合预测公式为 其中&#xff0c;权重m(x, y) is scaled by 64 以进行整数计算&#xff0c;R1(x, y)和R2(x, y)表示两个参考块中位于(x, y)的像素。P(x, y)将按比例缩小 1/64 以形成最终的预测…

Android安卓使用MQTT(JAVA)

一、app目录下添加 implementation org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.1.0 1) 点击Sync Now更新依赖 2) AndroidManifest.xml文件添加网络权限 <uses-permission android:name"android.permission.INTERNET"/> 二、 使用 1) 创建MqttConn…

使用 ABBYY FineReader PDF 15 在创建或转换 PDF 时自动生成书签

使用 ABBYY 为 PDF 文件添加书签&#xff0c;可以帮助快速定位文档中的主要内容&#xff0c;也能更方便的梳理出一份文档大纲。 有很多 PDF 文件在创建时并没有编辑书签&#xff0c;这里介绍使用 ABBYY FineReader PDF 15&#xff08;Win 系统&#xff09;在 PDF 中自动添加书…

postMessageXss续2

原文地址如下:https://research.securitum.com/art-of-bug-bounty-a-way-from-js-file-analysis-to-xss/ 在19年我写了一篇文章&#xff0c;是基于postMessageXss漏洞的入门教学:https://www.cnblogs.com/piaomiaohongchen/p/14727871.html 这几天浏览mXss技术的时候&#xff…

第三周周三总结

1.给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 示例 1&#xff1a; 输…

RuoYi-后端管理项目入门篇1

目录 前提准备 下载若依前后端 Gitee 地址 准备环境 后端数据库导入 1 克隆完成 若依后端管理后端 Gitte 地址 :若依/RuoYi-Vue 2.1 创建Data Source数据源 2.2 填写好对应的数据库User 和 Password 点击Apply 2.3 新建一个Schema 2.4 填写对应数据库名称 这边演示写的…

【I²C协议】STC89C51单片机IIC通信(代码+原理)

STC89C51单片机IIC通信 什么是IC协议特点构成 通信协议开始信号、结束信号、应答信号数据传输 代码示例 什么是IC协议 IIC,即IC&#xff0c;全称 Inter-Integrated Circuit&#xff0c;字面上的意思是集成电路之间&#xff0c;它其实是IC Bus简称&#xff0c;所以中文应该叫 集…

【Codeforces】Round 957 (Div. 3)_B. Angry Monk

作者&#xff1a;指针不指南吗 专栏&#xff1a;算法刷题 &#x1f43e;或许会很慢&#xff0c;但是不可以停下来&#x1f43e; 文章目录 题目题解try1代码正确题解贪心策略的解释为什么不是直接合并 总结 题目 题目链接 题解 try1代码 我的思路&#xff1a;单纯模拟 循环&a…

【字幕】字幕特效入门

前言 最近两周调研了一下字幕特效的底层程序逻辑&#xff0c;因为工作内容的原因&#xff0c;就分享几个自己找的链接具体细节就不分享了&#xff0c;CSDN也是我的个人笔记&#xff0c;只记录一些简单的内容用于后续自己方便查询&#xff0c;顺便帮助一下正在苦苦查阅资料入门…

基于STC89C51单片机的烟雾报警器设计(煤气火灾检测报警)(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于STC89C51单片机的烟雾报警器设计的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 摘要 原理图 实物图 仿真图 元件清单 代码 系统论文 资源下载 摘要 随着现代家庭用火、…

【高中数学/指数函数、幂函数】寻找曲线y=2^x与y=x^2的三个交汇点

【问题】 找到曲线y2^x与yx^2的三个交汇点。 【难点】 指数和二次函数摆在一起没法求解。 【解答】 y2^x与yx^2的交汇点&#xff0c;即曲线y2^x-x^2的零点&#xff0c;用Canvas作图就能清晰看到三个零点的存在&#xff0c;如图。 【图一】 其中&#xff0c;2&#xff0c;…

自制连点器

B站使用教程&#xff1a;https://www.bilibili.com/video/BV1SR85e4EKw/?vd_source47eba1800d831e86d4778a128740fe73 下载链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1Spv_yVPFB3zoS__VL-nhaQ?pwdyxo1 提取码&#xff1a;yxo1

排序算法(4)之快速排序(1)

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 排序算法(4)之快速排序(1) 收录于专栏【数据结构初阶】 本专栏旨在分享学习数据结构学习的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目…

langchain循序渐进之langchain 安装及使用

pip安装langchain pip install langchain安装langsmith(可选) langsmith官方提示是用来观察大模型复杂调用情况&#xff0c;可选项。 [LangSmith]点击注册然后把秘钥填进去就行&#xff0c;这里我略过了 export LANGCHAIN_TRACING_V2"true" export LANGCHAIN_A…

【C++】模版初阶以及STL的简介

个人主页~ 模版及STL 一、模版初阶1、泛型编程2、函数模版&#xff08;1&#xff09;概念&#xff08;2&#xff09;函数模版格式&#xff08;3&#xff09;函数模版的原理&#xff08;4&#xff09;函数模版的实例化①显式实例化②隐式实例化 &#xff08;5&#xff09;模版参…

精益六西格玛项目赋能,石油机械龙头企业质量效率双提升!

​国内某石油机械制造龙头&#xff0c;迎接挑战&#xff0c;迈向卓越&#xff0c;携手张驰咨询&#xff0c;启动精益六西格玛项目&#xff0c;开启管理革新新篇章。 在国家政策调整和市场竞争日益激烈的背景下&#xff0c;作为国内石油机械产品制造领域的龙头企业&#xff0c;…

算法 —— LRU算法

算法 —— LRU算法 LRULRU算法的工作原理&#xff1a;实现方法&#xff1a;性能考虑&#xff1a; 模拟过程splice函数对于std::list和std::forward_list基本语法&#xff1a;功能描述&#xff1a; 示例&#xff1a;注意事项&#xff1a; 如果大家已经学习过了Cache的替换算法和…

Linux——Shell脚本和Nginx反向代理服务器

1. Linux中的shell脚本【了解】 1.1 什么是shell Shell是一个用C语言编写的程序&#xff0c;它是用户使用Linux的桥梁 Shell 既是一种命令语言&#xff0c;有是一种程序设计语言 Shell是指一种应用程序&#xff0c;这个应用程序提供了一个界面&#xff0c;用户通过这个界面访问…

开放式耳机2024哪家品牌比较好?2024年爆火开放式耳机推荐

很多小伙伴在后台私信我&#xff0c;滴滴我说&#xff0c;最近开放式耳机这么火&#xff0c;他也想要入手一台问问我&#xff0c;有哪些开放式耳机值得现在入手的&#xff0c;作为一个尽职尽业的数码博主&#xff0c;我本来是一个个回复的&#xff0c;但是私信没想到这么多&…

[C++初阶]list的模拟实现

一、对于list的源码的部分分析 1.分析构造函数 首先&#xff0c;我们一开始最先看到的就是这个结点的结构体&#xff0c;在这里我们可以注意到这是一个双向链表。有一个前驱指针&#xff0c;一个后继指针。然后在有一个存储数据的空间 其次它的迭代器是一个自定义类型&#x…