首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

翻译 | 使用A-Frame打造WebVR版《我世界》

下面一个使用 HTML 搭建完整 3D 和 VR 场景,它能够诸如桌面设备和移动设备等任何 VR 平台运行: <script src="https://aframe.io/releases/0.5.0...<em>A-Frame</em> <em>是</em>一个实体组件系统(ECS)框架,ECS <em>在</em>游戏开发<em>中</em><em>是</em>一种流行<em>的</em>模式,值得注意<em>的</em><em>是</em> ECS 也被 Unity 引擎所使用。...CodePen <em>中</em>打开 添加体素 <em>在</em>我们<em>的</em> <em>VR</em> 应用<em>中</em>,体素(voxels)<em>的</em>写法类似 ,但会添加一些自定义<em>的</em> <em>A-Frame</em> 组件。...幸运<em>的</em><em>是</em>,<em>A-Frame</em> 拥有许多处理交互<em>的</em>组件。<em>VR</em> 中用于类似<em>光标</em>点击<em>的</em>场景方法<em>是</em>使用 raycaster,它射出一道激光并返回激光命中<em>的</em>物体。...<em>A-Frame</em> 提供基于注视点<em>的</em><em>光标</em>(注:就像 FPS 游戏<em>的</em>准心那样),可以利用此<em>光标</em>点击正在注视<em>的</em>物体,但也有可用<em>的</em>控制器<em>光标</em>组件来根据 <em>VR</em> 追踪控制器<em>的</em>位置发射激光,就像刚刚使用 teleport-controls

2.8K90

【元宇宙】iOS16将支持WebXR!一起来撸个WebVR华容道吧

那什么WebXR呢?说到VR大家一定不会陌生,前几年短暂火爆后一度遇冷,很大程度上由于高昂硬件成本限制了技术普及。...为了兼容更多终端设备,VR设备,用户通过手柄扳机键抓取(triggerdown)动作实现棋子移动、按钮点击,cardboard通过凝视(gaze)来选择并触发棋子选择移动和按钮点击,...棋子拖动交互在华容道,棋子拖动受限,只能上下左右四个方向,并且必须整个棋子拖入值全为 0 格子,而棋子移动触发在不同终端也是不同。...普通PC/移动端,用户操作二维,通过 mousedown/touchstart 和 mouseup/touchend 即可完成棋子移动;而在VR设备,用户操作三维,控制棋子移动需要借助手柄...目前,WebXR 无论 Web 开发还是 VR 开发领域都是参与人数较少一片蓝海。相关资料,尤其 A-Frame 框架除了官方文档外资料很少,网上搜到大部分也是官方文档搬运。

2.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

6个最好用 ARVR开源框架:无需任何插件安装,只用浏览器即可

Lullaby Lullaby Google 为 AR/VR 开发而推出高性能 C++ 开源库,支持完整 3D VR 环境,包括几何世界、全景图像和空间音频。...A-Frame A-Frame Mozilla 开源网页虚拟现实体验( WebVR )框架,旨在让创建 WebVR 体验变得更简单。...它可在移动、桌面、Vive 和 Rift 在内平台上运行,跨平台处理 3D 和 WebVR 模板。 A-Frame 被设计成 Web 开发者很熟悉模样,HTML 代码易于阅读和复制粘贴。 ?...React VR React VR Facebook 开源一款用于构建在 Web 浏览器运行 VR 应用框架,使用与 React 相同设计,让您通过声明式组件构建丰富 VR 世界和 UI...可通过 Oculus Rift 或者 Google Cardboard 浏览器上方便体验虚拟现实空间,无需安装插件和应用。 ?

8.6K111

VR操作Windows 系统一种怎样体验?

有想过VR操作Windows电脑系统怎样情景吗?...这个想法或许就快实现了,因为微软正将其操作系统浮动3D版——Windows Holographic 带入到像HTC Vive那样VR头显,而这一计划最快将在明年实现。...日前,英特尔开发者论坛上,有一个视频演示了VR头显设备中看到Windows系统是什么样子。 怎么样?还不错吧!虽然虚拟房间有点乏味,但它展示了基本理念。...不同于微软HoloLens那样狭窄视场角,你可以完整视线范围内浏览整个虚拟世界。...如果你还在担心上述视频真实性,英特尔VR主管金·帕里斯特(Kim Pallister)已经证实了该视频体验内容完全真实

1.3K40

使用WebRTC和WebVR进行VR视频通话

我似乎有时间去做一些新、令人兴奋事情,唯一办法就是直接在Call For Papers去做一个疯狂演讲。 注意:从技术上讲,它现在“WebXR”,但我会坚持使用这篇文章更常见VR”。...A-Frame框架 有很多方法可以开始使用WebVR,但我采用方法使用一个名为A-Frame框架,它允许你编写一些HTML,并引入一个JavaScript库并立即开始构建VR体验。...Verto客户端库信令部分——将SIP PBX连接到WebRTC端点更常见体验,通过WebSocket替换SIP。...这让A-Frame可以发挥其神奇作用——从资产中获取数据并将其加载到3D环境显示“a-video”标签内画布上。...最大学习,尽管这可能观看视频会议绝妙方式,但将虚拟现实观众包括视频会议不可行。 当他们戴着耳机看着它时候。也许这就是微软HoloLens通过混合现实使事情变得更好地方。

4K20

硬核看房利器——Web 全景实现

相比定点视角,移动视角 VR 实现原理则可能截然不同。如果按照定点视角实现方法,移动视角需要则是覆盖任意位置 360 视角平面图,数据量难以想象。...一方面这对初始场景建立有要求,另一方面视角移动过程场景渲染算力也有要求。因此这种类型 VR 开发成本与体验成本相比起定点视角类型都较高。...下面的代码段计算,radius 值固定,因此根据边数不同,切片高度将发生变化。也可以固定 d 值或是切片高度来进行相应值计算。 ?... CSS 3D 方案,我们通过旋转整个场景容器,来实现全景场景浏览,而在阿三方案,我们需要通过调整摄像机位置来实现(我们将摄像机聚焦点固定在球体中心)。...file=/src/Pano.js ThreeJS 场景 阿三场景,我们需要改变摄像机聚焦点位置,又或者将摄像机聚焦点固定在球体中心,移动摄像机位置。

2K30

分享 13 个可以在线制作 360 度全景视图网站

所以今天内容,我将为您介绍几个Javascript 库,它们可以帮助我们解决上述问题并提高用户体验。 快来和我一探究竟吧!...具有可用于视频或图像等有用功能,它通过旋转或滑动、通过 URL 加载图像或视频来帮助用户更轻松地移动设备上交互。 它分为 2 种主要显示类型:PanoViewer 和 SpinViewer。...此外,它还提供您可以通过非常简单设置直接用于网站 CDN 只需将它提供属性调用到我们想要显示 360 HTML 对象图像。...06、A-Frame 地址:https://aframe.io/ A-Frame 除了帮助您构建 360 度媒体播放器外,它还提供了许多附加功能。其他功能可帮助您增强网站虚拟现实体验。...07、VR View 地址:https://developers.google.com/vr/develop/web/vrview-web VR View 一个使用 Google 提供 Javascript

7.9K50

元宇宙趋势下前端现状

简单点讲就是:我们虚拟世界与一个全新身份一一对应,并且不会间断地“生活下去” Roblox 提出一个真正元宇宙产品应该具备八大要素,很容易就能让人联想到《头号玩家》这部电影: 身份:拥有一个虚拟身份...朋友:元宇宙当中拥有朋友,可以社交,无论现实是否认识。 沉浸感:能够沉浸在元宇宙体验当中,忽略其他一切。 低延迟:元宇宙一切都是同步发生,没有异步性或延迟性。...作为大家口中“互联网最终形态”,需要如今大热包括 AR、VR、5G、云计算、区块链等软硬件技术成熟。才能构建出一个去中心化、不受单一控制、永续不会终止世界。...其实就是 Web 上开发 AR(Augmented Reality)和 VR(Virtual Reality)应用 API, “X”代表沉浸式体验任何事物。...苹果:WebARonARKit[7](源自移动端 ARKit) 安卓:WebARonARCore[8](源自移动端 ARCore) 主流AR 框架:目前维护和使用比较多 AR.js[9],另外还有一些其他

1.4K20

VR环境养一只专属宠物,种什么样体验?

那时候还没有多少游戏,小企鹅倒是打发了不少无聊时间。 ? 成长过程玩家若是照顾较好会得到升级,若是疏于照顾,QQ宠物则会生病、甚至死亡。 ?...游戏中玩家会陪着汤姆玩耍并经历不同的人生阶段(婴儿、幼儿、青少年、成年),汤姆猫成长过程负责照顾它吃喝拉撒,穿衣打扮,跟他玩游戏,这简直就是养成系游戏迷最爱呀~ ?...玩家可以让其盒子里睡觉,通过移动、触摸游戏手把或者使用按键来喂食、抚摸宠物,还能玩猫咪脚掌上肉球。可以满足小伙伴们吸猫愿望啦,猫奴福利呀有木有~ ?...喜欢日系手绘风铲屎官们可以冲一波啦,P君内心OS:日系画风真的好治愈呀! ? 《RoVR》 别急,汪星人也来报道啦,由Ridgeline实验室研发一款《RoVR》应用,VR饲养柯基犬。 ?...VR环境养宠物,既能让那些想要饲养真正宠物而无法如愿的人们体验到养宠物乐趣,又能让他们找到心灵慰藉,何乐而不为呢。感兴趣小伙伴们可以开启一段进阶版云养宠物新潮流啦! ?

1K10

元宇宙趋势下前端现状

简单点讲就是:我们虚拟世界与一个全新身份一一对应,并且不会间断地“生活下去” Roblox 提出一个真正元宇宙产品应该具备八大要素,很容易就能让人联想到《头号玩家》这部电影: 身份:拥有一个虚拟身份...朋友:元宇宙当中拥有朋友,可以社交,无论现实是否认识。 沉浸感:能够沉浸在元宇宙体验当中,忽略其他一切。 低延迟:元宇宙一切都是同步发生,没有异步性或延迟性。...作为大家口中“互联网最终形态”,需要如今大热包括 AR、VR、5G、云计算、区块链等软硬件技术成熟。才能构建出一个去中心化、不受单一控制、永续不会终止世界。...其实就是 Web 上开发 AR(Augmented Reality)和 VR(Virtual Reality)应用 API, “X”代表沉浸式体验任何事物。...苹果:WebARonARKit[7](源自移动端 ARKit) 安卓:WebARonARCore[8](源自移动端 ARCore) 主流AR 框架:目前维护和使用比较多 AR.js[9],另外还有一些其他

1.2K20

元宇宙相关前端技术

简单点讲就是:我们虚拟世界与一个全新身份一一对应,并且不会间断地“生活下去” Roblox 提出一个真正元宇宙产品应该具备八大要素,很容易就能让人联想到《头号玩家》这部电影: 身份:拥有一个虚拟身份...朋友:元宇宙当中拥有朋友,可以社交,无论现实是否认识。 沉浸感:能够沉浸在元宇宙体验当中,忽略其他一切。 低延迟:元宇宙一切都是同步发生,没有异步性或延迟性。...作为大家口中“互联网最终形态”,需要如今大热包括 AR、VR、5G、云计算、区块链等软硬件技术成熟。才能构建出一个去中心化、不受单一控制、永续不会终止世界。...其实就是 Web 上开发 AR(Augmented Reality)和 VR(Virtual Reality)应用 API, “X”代表沉浸式体验任何事物。...苹果:WebARonARKit[7](源自移动端 ARKit) 安卓:WebARonARCore[8](源自移动端 ARCore) 主流AR 框架:目前维护和使用比较多 AR.js[9],另外还有一些其他

1.4K30

元宇宙下前端现状

简单点讲就是:我们虚拟世界与一个全新身份一一对应,并且不会间断地“生活下去” Roblox 提出一个真正元宇宙产品应该具备八大要素,很容易就能让人联想到《头号玩家》这部电影: 身份:拥有一个虚拟身份...朋友:元宇宙当中拥有朋友,可以社交,无论现实是否认识。 沉浸感:能够沉浸在元宇宙体验当中,忽略其他一切。 低延迟:元宇宙一切都是同步发生,没有异步性或延迟性。...作为大家口中“互联网最终形态”,需要如今大热包括 AR、VR、5G、云计算、区块链等软硬件技术成熟。才能构建出一个去中心化、不受单一控制、永续不会终止世界。...其实就是 Web 上开发 AR(Augmented Reality)和 VR(Virtual Reality)应用 API, “X”代表沉浸式体验任何事物。...苹果:WebARonARKit(源自移动端 ARKit) 安卓:WebARonARCore(源自移动端 ARCore) 主流AR 框架:目前维护和使用比较多 AR.js,另外还有一些其他: three.ar.js

1.5K21

元宇宙趋势下前端现状

简单点讲就是:我们虚拟世界与一个全新身份一一对应,并且不会间断地“生活下去” Roblox 提出一个真正元宇宙产品应该具备八大要素,很容易就能让人联想到《头号玩家》这部电影: 身份:拥有一个虚拟身份...朋友:元宇宙当中拥有朋友,可以社交,无论现实是否认识。 沉浸感:能够沉浸在元宇宙体验当中,忽略其他一切。 低延迟:元宇宙一切都是同步发生,没有异步性或延迟性。...作为大家口中“互联网最终形态”,需要如今大热包括 AR、VR、5G、云计算、区块链等软硬件技术成熟。才能构建出一个去中心化、不受单一控制、永续不会终止世界。...其实就是 Web 上开发 AR(Augmented Reality)和 VR(Virtual Reality)应用 API, “X”代表沉浸式体验任何事物。...苹果:WebARonARKit[7](源自移动端 ARKit) 安卓:WebARonARCore[8](源自移动端 ARCore) 主流AR 框架:目前维护和使用比较多 AR.js[9],另外还有一些其他

1.6K20

百度、腾讯、火狐,这些知名浏览器都紧盯WebVR究竟有何魅力?

降低开发门槛,让Web开发者轻松玩转VR ? 从实际应用上来说,WebVR一个关于VR网络应用开放性标准,支持人们通过浏览器直接获取VR体验。...据悉,由MozVR开发A-Frame框架能够降低WebVR开发门槛,为开发者提供专门访问VR硬件接口,使他们能够更加舒适构建VR体验。 ?...就如我们习惯了网站一般,音乐、图片、视频都跳出了应用平台限制,以内容本质来为用户选择观看。WebVR下,VR设备已不再约束用户享受体验格式,而是作为观看VR内容工具存在。...WebVR将VR体验直接搬进了浏览器,用户只需要购置一副谷歌Cardboard就能够虚拟世界畅游。而随着VR设备不断发展,VR内容必会走向用户自制为主。...未来,人们或只要戴上VR头显就能直接地沉浸在基于WebVR,就像现在打开H5那样。 本文属VRPinea原创稿件,转载请洽:brand@vrpinea.com

1.1K80

元宇宙趋势下前端,有哪些机会与挑战

简单点讲就是:我们虚拟世界与一个全新身份一一对应,并且不会间断地“生活下去” Roblox 提出一个真正元宇宙产品应该具备八大要素,很容易就能让人联想到《头号玩家》这部电影: 身份:拥有一个虚拟身份...朋友:元宇宙当中拥有朋友,可以社交,无论现实是否认识。 沉浸感:能够沉浸在元宇宙体验当中,忽略其他一切。 低延迟:元宇宙一切都是同步发生,没有异步性或延迟性。...作为大家口中“互联网最终形态”,需要如今大热包括 AR、VR、5G、云计算、区块链等软硬件技术成熟。才能构建出一个去中心化、不受单一控制、永续不会终止世界。...其实就是 Web 上开发 AR(Augmented Reality)和 VR(Virtual Reality)应用 API, “X”代表沉浸式体验任何事物。...苹果:WebARonARKit(源自移动端 ARKit) 安卓:WebARonARCore(源自移动端 ARCore) 主流AR 框架:目前维护和使用比较多 AR.js,另外还有一些其他: three.ar.js

1.4K30

你有没有觉得邮件发送人固定配置yml文件不妥当呢?SpringBoot 动态设置邮件发送人

明月当天,不知道你有没有思念的人 前言 之前其实已经写过SpringBoot异步发送邮件,但是今天一个小项目中要用到发送邮件时,我突然觉得邮件发送人只有一个,并且固定写在yml文件,就是非常不妥当...写之前已经翻过很多博客了,该踩坑都踩差不多了,我实现之后写文章,有问题大家可以一起交流。...我先说说我想要达到什么样效果: 邮件发送人可以是多个,yml文件兜底配置(即数据库没有一个可用时,使用yml文件配置邮件发送人) 项目启动后,我也可以临时增加邮件发送人,或者禁用掉某个邮件发送人...465端口(SMTPS)︰它是SMTPS协议服务所使用其中一个端口,它在邮件传输过程加密传输(SSL/TLS),相比于SMTP协议攻击者无法获得邮件内容,邮件一开始就被保护了起来。...大家好,我博主宁春:主页 一名喜欢文艺却踏上编程这条道路小青年。 希望:我们,待别日相见时,都已有所成。

1.1K40

2.5 VR扫描:AR眼镜厂商RealWear完成1700万美元融资;诺亦腾发布Perception Neuron 2.0

该公司近日提交证券文件公布了这一消息,同时他们还表示现正在寻找额外300万美元融资。...VRPinea独家点评:果然懒人推动科技发展,或许以后可以躺着玩VR。...前Mozilla WebVR开发者推全新VR浏览器Supermedium 近日,Web VR框架“A-Frame创造者和前Mozilla WebVR开发者,合作推出一款全新VR浏览器Supermedium...VRPinea独家点评:能够随时玩VR才是好VR。 OPTIS联手英国虚拟工程中心,推进VR工业发展 据悉,虚拟原型设计公司OPTIS现正与英国虚拟工程中心合作,共同推进VR工业领域发展。...此次合作,将利用OPTISVR解决方案,模拟工业从原型到成品每一步生产过程,探索如何将VR技术整合到产品制造过程。 VRPinea独家点评:既方便发现问题,又能降低成本,何乐而不为呢?

867100

微软Edge浏览器支持WebVR,小举动背后“大阴谋”

比如说你在网页上看到一个VR视频,准备戴上VR去欣赏。然而因为在网页上看到,你会发现你VR里找不到入口。...为什么微软要在浏览器加入WebVR 早起鸟儿有虫吃 根据Net Market Share八月份调查数据显示,全球浏览器市场上,占据最大份额Chrome。...比如Mozilla开发A-Frame,开发者只要在原来网页代码上加入几行代码就可以创建简单VR体验。...跨平台兼容性 VR内容分发平台大都比较碎片分散化,对于一个VR初次使用者来说,如果你想获得更多VR内容,必须得先下载各种应用商店,然后在这些商店按图索骥寻找到合适VR体验。...今早看到消息称微软Windows Phone从旗舰店“消失”,这么多年来,移动产品和系统一直微软难以言说痛苦。一次次错失先机微软,VR发展上,怎么可能会再次棋差一步。

1.2K30

沙场秋点兵,WebVR争夺战再升级,你猜谁能抢下这块重要高地?

其实早在2014年,WebVR概念就被Mozilla开发者所提出,其最初目的是为了让玩家能够探索虚拟空间,更加轻松地各种设备上体验VR。 什么WebVR?...WebVR降低开发者开发门槛同时,也降低了VR内容对硬件要求,只需简单VR眼镜盒子,搭配上手机加速度计、陀螺仪等感应器,即可感受到VR魅力,且可获得海量内容体验。...此外,微软还宣布将会有20000个以上Universal Windows应用支持VR。借助Edge浏览器,玩家可以将3D物体从网页拖拽出来,比如在购买前玩家就看到家具实际场景样子。 ?...Oculus表示,WebVR一个发展API,虽然标准规范上开始达成了一定共识,但仍然存在许多不确定因素。...目前,Mozilla正在鼓励开发者使用A-Frame框架或React VR等其他网页引擎和框架开发更多WebVR应用。

79360
领券