【1】A-Frame整体介绍

news2024/11/15 7:00:21

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.coloradmin.cn/o/1911364.html

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

相关文章

QT文件生成可执行的exe程序

将qt项目生成可执行的exe程序可按照以下步骤进行&#xff1a; 1、在qt中构建运行生成.exe文件&#xff1b; 2、从自定义的路径中取出exe文件放在一个单独的空文件夹中&#xff08;exe文件在该文件夹中的release文件夹中&#xff09;&#xff1b; 3、从开始程序中搜索qt&#xf…

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

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

Java文件操作和IO的小案例

文章目录 案例1案例2案例3 案例1 要求&#xff1a; 扫描指定目录&#xff0c;并找到名称中包含指定字符的所有普通文件&#xff08;不包含目录&#xff09;&#xff0c;并且后续询问用户是否要删除该文件。 代码实现&#xff1a; package shixun;import java.io.File; import…

deepstream段错误

&#x1f610; 错误&#xff1a; 探针中由于使用了pyds.get_nvds_buf_surface(hash(gst_buffer), frame_meta.batch_id)导致的段错误&#xff08;segmentation fault&#xff09;。 解决方式&#xff1a;

electron src build

编译文档&#xff1a; 构建说明 | Electron 1 下载depot_tools &#xff08;1&#xff09;安装depot_tools用于获取 Chromium 及其依赖项的工具集&#xff1a;地址 WINDOWS Download the depot_tools bundle and extract it somewhere. (2)在 Windows 上&#xff0c;您需要…

语义分割和实例分割区别?

语义分割&#xff1a;将图像中的每个像素分配给其对应的语义类别&#xff0c;其主要针对于像素&#xff0c;或者说它是像素级别的图像分割方法。&#xff1a;语义分割的目的是为了从像素级别理解图像的内容&#xff0c;并为图像中的每个像素分配一个对象类。 实例分割&#xf…

C++(第五天----多继承、虚继承、虚函数、虚表)

一、继承对象的内存空间 构造函数调用顺序&#xff0c;先调用父类&#xff0c;再调用子类 #include<iostream>using namespace std;//基类 父类 class Base{ public: //公有权限 类的外部 类的内部 Base(){cout<<"Base()"<<endl;}Base(int …

(补充):java各种进制和文本、图像、音频在计算机中的存储方式

文章目录 前言一、进制1 逢几进一2 常见进制在java中的表示3 进制中的转换(1)任意进制转十进制(2)十进制转其他进制二、计算机中的存储1 计算机的存储规则(文本数据)(1)ASCII码表(2)编码规则的发展演化2 计算机的存储规则(图片数据)(1)分辨率、像素(2)黑白图与灰度…

线程池【开发实践】

文章目录 一、为什么要用线程池1.1 单线程的问题1.2 手动创建多线程的问题1.3 线程池的作用&#xff08;优点&#xff09;1.4 线程池的使用场景 二、线程池的基础知识2.1 线程池的核心组件2.2 JUC中的线程池架构2.3 线程池的配置参数2.4 线程池常见的拒绝策略&#xff08;可自定…

el-image放大图片功能

1.需求&#xff1a;点击图片后放大图片 html代码&#xff1a; <el-imagestyle"width: 100px; height: 100px":src"baseUrl item.id":zoom-rate"1.2":max-scale"7":min-scale"0.2":preview-src-list"srcList"…

淘宝商品历史价格查询(免费)

当前资料来源于网络&#xff0c;禁止用于商用&#xff0c;仅限于学习。 淘宝联盟里面就可以看到历史价格 并且没有加密 淘宝商品历史价格查询可以通过以下步骤进行&#xff1a; 先下载后&#xff0c;登录app注册账户 打开淘宝网站或淘宝手机App。在搜索框中输入你想要查询的商…

Iptables与Firewalld防火墙

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、防火墙管理工具 二、Iptables 三、Firewalld ​四、服务的访问控制列表 五、Cockpit驾驶舱管理工具 致谢 一、防火墙管理工具 防火墙…

js ES6 part1

听了介绍感觉就是把js在oop的使用 作用域 作用域&#xff08;scope&#xff09;规定了变量能够被访问的“范围”&#xff0c;离开了这个“范围”变量便不能被访问&#xff0c; 作用域分为&#xff1a; 局部作用域、 全局作用域 1. 函数作用域&#xff1a; 在函数内部声明的…

【UE5】仅修改结构体的若干个数据

蓝图中的结构体变量 | 虚幻引擎4.27文档 (unrealengine.com) 连线连到傻&#xff0c;因为如果某个变量set空值也一起过去了。一查发现有这个节点。

Windows10系统下mysql5.6的安装步骤

1.下载mysql 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 在这里我们下载zip的包 2.解压mysql包到指定目录 3. 添加my.ini文件 # For advice on how to change settings please see # http://dev.mysql.com/doc/refman/5.6/en/server-configurat…

最新深度技术Win7精简版系统:免费下载!

在Win7电脑操作中&#xff0c;用户想要给电脑安装上深度技术Win7精简版系统&#xff0c;但不知道去哪里才能找到该系统版本&#xff1f;接下来系统之家小编给大家带来了深度技术Win7系统精简版本的下载地址&#xff0c;方便大家点击下载安装。系统安装步骤已简化&#xff0c;新…

Java客户端调用SOAP方式的WebService服务实现方式分析

简介 在多系统交互中&#xff0c;有时候需要以Java作为客户端来调用SOAP方式的WebService服务&#xff0c;本文通过分析不同的调用方式&#xff0c;以Demo的形式&#xff0c;帮助读者在生产实践中选择合适的调用方式。 本文JDK环境为JDK17。 结论 推荐使用Axis2或者Jaxws&#…

20240709每日后端--------最优解决Invalid bound statement (not found)

目标 最优解决Invalid bound statement (not found) 步骤 1、打包 2、查看target下是否成双成对出现 3、核对无误后&#xff0c;即可解决问题。

重塑智慧生活想象 Yeelight易来举行2024年战略及新品发布会圆满成功

7月9日&#xff0c;智能照明品牌Yeelight易来在广州举行“光为境和无界”——2024年Yeelight易来战略&新品发布会&#xff0c;此次发布会不仅展示了易来在新的一年中取得的显著业绩增长&#xff0c;还发布了多款引领行业潮流的智能新品。同时&#xff0c;发布会还邀请了权威…

Docker搭建kafka+zookeeper以及Springboot集成kafka快速入门

参考文章 【Docker安装部署KafkaZookeeper详细教程】_linux arm docker安装kafka-CSDN博客 Docker搭建kafkazookeeper 打开我们的docker的镜像源配置 vim /etc/docker/daemon.json 配置 { "registry-mirrors": ["https://widlhm9p.mirror.aliyuncs.com"…