【1】A-Frame整体介绍

1.A-Frame是什么?

A-Frame 是一个用于构建虚拟现实 (VR) 体验的 Web 框架。 A-Frame 基于 HTML 之上,因此上手简单。但 A-Frame 不仅仅是 3D 场景图或标记语言;它还是一种标记语言。其核心是一个强大的实体组件框架,为 Three.js 提供了声明性、可扩展和可组合的结构。

2.A-Frame的特性?

  • VR 变得简单:只需放入 <script> 标签和 <a-scene> 。 A-Frame 将处理 3D 样板、VR 设置和默认控件。无需安装,无需构建步骤。
  • 声明性 HTML:HTML 易于阅读、理解以及复制和粘贴。 A-Frame 基于 HTML,每个人都可以使用:Web 开发人员、VR 爱好者、艺术家、设计师、教育工作者、创客、孩子。
  • 实体组件架构:A-Frame 是一个强大的 Three.js 框架,提供了声明性、可组合、可重用的实体组件结构。 HTML 只是冰山一角;开发人员可以无限制地访问 JavaScript、DOM API、 Three.js、WebVR 和 WebGL。
  • 跨平台 VR:为 Vive、Rift、Meta Quest、Windows Mixed Reality 和 Cardboard 构建 VR 应用程序,并支持所有相应的控制器。没有耳机或控制器?没问题! A-Frame 仍然适用于标准台式机和智能手机。
  • 性能:A-Frame 针对 WebVR 进行了彻底优化。虽然 A-Frame 使用 DOM,但它的元素不涉及浏览器布局引擎。 3D 对象更新全部在内存中完成,几乎没有垃圾和开销。最具互动性和大规模的 WebVR 应用程序已在 A-Frame 中完成,以 90fps 流畅运行。
  • 视觉检查器:A-Frame 提供了一个方便的内置视觉 3D 检查器。打开任何 A 框架场景,点击 <ctrl> + <alt> + i<ctrl> + <option> + i ,然后飞来飞去看看引擎盖下面
  • 组件:使用 A-Frame 的核心组件(例如几何图形、材质、灯光、动画、模型、光线投射器、阴影、位置音频、文本和大多数主要耳机的控件)开始运行。进一步了解数百个社区组件,包括环境、状态、粒子系统、物理、多用户、海洋、隐形传态、超级双手和增强现实。
  • 经过验证且可扩展:A-Frame 已被 Google、迪士尼、三星、丰田、福特、雪佛兰、国际特赦组织、CERN、NPR、半岛电视台、华盛顿邮报、NASA 等公司使用。谷歌、微软、Oculus、三星等公司都为A-Frame做出了贡献。

3.支持哪些VR平台与设备?

(1)支持的平台

A-Frame 通过浏览器支持几乎所有平台。 A-Frame 支持的通用平台包括:

  • 桌面 VR头显

  • 移动设备上的 VR头显

  • 独立头显上的 VR

  • PC(即鼠标和键盘)

  • 平板、手机

已证明可与 A-Frame 配合使用的其他一些平台包括:

  • AR 头显上的增强现实 (AR)(例如 Magic Leap、HoloLens)

  • 移动设备上的增强现实 (AR)(即ARKit、ARCore)

(2)支持的头显

A-Frame 通过浏览器支持大多数头显。 A-Frame 支持的一些 VR 头显包括:

  • HTC Vive

  • Oculus Rift

  • Oculus Quest

  • Oculus Quest 2

  • Oculus Quest 3

  • Oculus Go

  • Valve Index

  • Vive Focus

对于一般硬件建议(不是要求):

  • Oculus Rift 硬件推荐

  • HTC Vive 硬件推荐

  • 对于智能手机,iOS 版为 iPhone 6,Android 版至少为 Galaxy S6

(3)支持的浏览器

A-Frame 支持任何实现 WebXR 规范的浏览器的 VR,以及大多数浏览器的平面 3D。大型浏览器供应商正在慢慢转向 WebXR 规范,尽管它对 A-Frame 开发人员来说没有太多前端变化,主要涉及 API 的重命名。

  • Supermedium(可在 Oculus 和 Steam 上使用)

  • Firefox

  • Oculus Browser

  • Samsung Internet

  • Microsoft Edge

  • Chrome (WebXR under origin trials)

  • Exokit (experimental early support)

A-Frame 通过 WebVR polyfill 支持大多数不支持 WebXR 的现代移动浏览器。请注意,这些浏览器没有官方的 WebXR 支持,我们使用的是 polyfill;重要的是要降低这些浏览器将提供高质量体验并且没有怪癖的期望:

  • Safari for iOS

  • Chrome for Android

  • Firefox for iOS

  • Samsung Internet

  • UC Browser

对于平面或普通 3D 支持,A-Frame 支持所有现代浏览器,特别是那些支持 WebGL 的浏览器,包括:

  • Firefox

  • Chrome

  • Safari

  • Edge

  • Internet Explorer 11

4.如何安装使用?

(1)启动本地服务器

python -m http.server
或
npm i -g five-server@latest && five-server --port=8000

(2)编写代码

直接引用:
<head>
  <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
或
npm install aframe
nodejs代码中引用:
require('aframe');

(3)完整例子

<html>
  <head>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

昇思MindSpore学习入门-模型模块自定义

基础用法示例 神经网络模型由各种层(Layer)构成&#xff0c;MindSpore提供构造神经网络层的基础单元Cell&#xff0c;基于Cell进行神经网络封装。下面使用Cell构造经典模型AlexNet。 如图所示&#xff0c;AlexNet由5个卷积层与3个全连接层串联构成&#xff0c;我们使用mindspo…

秋招Java后端开发冲刺——并发篇2(ThreadLocal、Future接口)

本文对ThreadLocal类和Future接口进行了总结概括&#xff0c;包括ThreadLocal类的原理、内存泄露等问题&#xff0c;和Future接口的使用等问题。 一、ThreadLocal 1. 介绍 ThreadLocal&#xff08;线程局部变量&#xff09;是Java中的一个类&#xff0c;线程通过维护一个本地…

探索安卓四大组件:活动、服务、广播接收器和内容提供者

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Android ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 1. Activity&#xff08;活动&#xff09; 概述&#xff1a; 生命周期&#xff1a; 使用方法&#xff1a; 2. Service&…

简过网:2024年一级造价工程师正在报名中,看看你有报考资格吗?

计划报考2024一级造价工程师的小伙伴要注意了&#xff0c;现在一造报名正在启动中&#xff0c;想考试的小伙伴一定要看清楚这些报考条件和考试内容哦&#xff0c;今天&#xff0c;小编和大家一块来分享一下&#xff0c;希望对你有帮助。 几个简单的问题&#xff0c;让你彻底了解…

2024年信息系统项目管理师1批次上午客观题参考答案及解析(3)

51、探索各种选项&#xff0c;权衡包括时间与成本、质量与成本、风险与进度、进度与质量等多种因素&#xff0c;在整个过程中&#xff0c;舍弃无效或次优的替代方案&#xff0c;这种不确定性应对方法是()。 A&#xff0e;集合设计 B&#xff0e;坚韧性 C&#xff0e;多种结果…

alibabacloud学习笔记11

讲解什么是配置中心及使用前后的好处 讲解Nacos作为配置中心面板介绍 官方文档 Nacos config alibaba/spring-cloud-alibaba Wiki GitHub 加入依赖&#xff1a; 订单服务和视频服务也加上这个依赖。 讲解Nacos作为配置中心实战 订单服务添加配置。 我们注释掉之前的配置。 …

idea如何连接gitee仓库

1.先在idea上登录gitee账号 在gitee官网上生成令牌。 点击生成新令牌。 复制到idea上就行了。然后登陆成功。 2.连接gitee 把项目的https克隆到idea中就行了。

Joblib 是一个专注于高效计算和数据持久化的 Python 库

目录 01Joblib 是什么&#xff1f; 为什么选择 Joblib&#xff1f; 安装与配置 02Joblib 的基本用法 并行计算 数据持久化 03实战案例 项目简介 项目结构 依赖安装 应用代码 运行应用 …

javascript高级部分笔记

javascript高级部分 Function方法 与 函数式编程 call 语法&#xff1a;call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义&#xff1a;调用一个对象的一个方法&#xff0c;以另一个对象替换当前对象。 说明&#xff1a;call 方法可以用来代替另一个对象调用一个方法。cal…

RT2-使用NLP的方式去训练机器人控制器

目标 研究在网络数据上训练的视觉语言模型也可以直接结合到端到端的机器人控制中&#xff0c;提升泛化性以及获得突出的语义推理&#xff1b;使得单个的端到端训练模型可以同时学习从机器人观测到动作的映射&#xff0c;这个过程可以受益于基于网络上的语言和视觉语言数据的预训…

HumanoidBench——模拟仿人机器人算法有未来

概述 论文地址&#xff1a;https://arxiv.org/pdf/2403.10506 仿人机器人具有类似人类的外形&#xff0c;有望在各种环境和任务中为人类提供支持。然而&#xff0c;昂贵且易碎的硬件是这项研究面临的挑战。因此&#xff0c;本研究开发了使用先进模拟技术的 HumanoidBench。该基…

【工具分享】零零信安——攻击面管理平台

文章目录 00SEC-ASM™功能介绍功能演示 最近闲来无事&#xff0c;到处网上冲浪&#xff0c;无意间发现了长亭云图攻击面管理平台&#xff0c;无奈需要授权才能使用&#xff0c;于是就找到了平替&#xff1a;零零信安攻击面管理平台。 长亭云图攻击面管理平台&#xff1a;https:…

Spring Boot集成grpc快速入门demo

1.什么是GRPC&#xff1f; gRPC 是一个高性能、开源、通用的RPC框架&#xff0c;由Google推出&#xff0c;基于HTTP2协议标准设计开发&#xff0c;默认采用Protocol Buffers数据序列化协议&#xff0c;支持多种开发语言。gRPC提供了一种简单的方法来精确的定义服务&#xff0c…

Spark SQL中的正则表达式应用

正则表达式是一种强大的文本处理工具,在Spark SQL中也得到了广泛支持。本文将介绍Spark SQL中使用正则表达式的主要方法和常见场景。 目录 1. 正则表达式函数1.1 regexp_extract1.2 regexp_replace1.3 regexp_like 2. 在WHERE子句中使用正则表达式3. 在GROUP BY中使用正则表达…

线程池案例

秒杀 需求 10个礼物20个客户抢随机10个客户获取礼物&#xff0c;另外10无法获取礼物 任务类 记得给共享资源加锁 public class MyTask implements Runnable{// 礼物列表private ArrayList<String> gifts ;// 用户名private String username;public MyTask( String user…

2024 WAIC|第四范式签约上海徐汇 加速推动“人工智能+千行百业”

7月5日&#xff0c;在“加速‘人工智能’构筑新质生产力”活动上&#xff0c;上海市徐汇区与作为大模型开发应用的核心企业第四范式举行签约仪式。徐汇区委常委、副区长俞林伟&#xff0c;第四范式联合创始人、总裁胡时伟等代表上台签约。 未来&#xff0c;双方将围绕人工智能前…

网络服务器配置与管理

网络服务器配置与管理是一个涉及多个方面的领域&#xff0c;它涵盖了从物理硬件的设置到操作系统、网络服务和应用的配置&#xff0c;再到日常维护和安全策略的实施。以下是网络服务器配置与管理的一些核心概念和步骤&#xff1a; 硬件配置&#xff1a; 选择合适的服务器硬件&a…

【多线程】wait()和notify()

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. 为什么需要wait()方法和notify()方法&#xff1f;2. wait()方法2.1 wait()方法的作用2.2 wait()做的事情2…

IDEA新建项目并撰写Java代码的方法

本文介绍在IntelliJ IDEA软件中&#xff0c;新建项目或打开已有项目&#xff0c;并撰写Java代码的具体方法&#xff1b;Groovy等语言的代码也可以基于这种方法来撰写。 在之前的文章IntelliJ IDEA社区版在Windows电脑中的下载、安装方法&#xff08;https://blog.csdn.net/zheb…