maltadirk 发表于 2022-12-10 07:59

A-Frame是什么?

1.开发WebXR应用的方式

目前开发WebXR应用,一般有三种方式:

[*]使用封装好的第三方库
对于没有 WebGL 基础的用户,学习和开发成本相对都比较高,因此市面上有一些在 WebGL 基础上封装的库,帮助我们快速上手开发 WebXR,例如 aframe、babylon.js、three.js 。
[*]WebGL + WebXR api
使用 WebGL 加 WebXR api 开发的方式,相对来说是比较贴近于底层的,对于底层,特别是渲染模块我们可以做一些优化操作从而提升 XR 的性能和体验。通常采用的技术方案是:HTML5+ JavaScript + WebGL + WebVR API 。
这种方法相对于A-Frame的优势在于可以将VR的支持方便地引入到我们自己的Web3D引擎中,同时对于底层,特别是渲染模块可以做更多优化操作从而提升VR运行时的性能与体验。
[*]传统 3d 引擎 + emscripten
传统的 3D 应用开发我们一般都会采用一些比较知名的 3D 引擎例如 unity、unreal 等,借助 emscripten,我们可以将 C 和 C++ 代码编译为 WebAssembly,从而实现 web 端的 XR。
2.A-Frame到底是什么?

是由WebVR的发起人 Mozilla VR团队所构建,是当下用来开发WebVR内容主流技术方案,现在由 aframe 在 Supermedium 中的联合创建者维护。MozVR团队开发A-Frame框架的目的是:让构建3D/VR场景变得更易更快,以吸引Web开发社区进入WebVR的生态。作为一个独立的开源项目,aframe 已经成长为最大的 VR 社区之一。

A-Frame是专门面向没有编程基础的普通用户来开发Web端VR内容。是一个用来构建虚拟现实(VR)应用的网页开发框架,它基于HTML和DOM,上手十分简单。但是 A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言,其核心思想是基于 Three.js 来提供一个声明式、可扩展以及组件化的编程结构。由于大多数 Web 都是建立在 HTML 之上的,因此大多数现有工具和库都可以使用 A-Frame,包括 React、Vue.js、Angular、d3.js 和 jQuery。通过该框架构建的VR场景能兼容智能手机、PC、 Oculus Rift和HTC Vive。

A-Frame的特点:
1.它是一个开源的框架;
2.搭建场景易用平台
如果想以较低的门槛体验一把WebVR开发,那么使用MozVR团队开发的A-Frame框架是最佳的选择。
3.A-Frame的优势与特点


[*]简单的 VR 制作
只需要引入 <script> 标签 和 <a-scene>,aframe 将自动生成3D渲染的样板代码、VR相关设置和缺省的交互控制。不需要安装任何东西也无需编译构建。
[*]A-Frame能减少冗余代码
冗余复杂的代码成为了尝鲜者的障碍,A-Frame将复杂冗余的代码减至一行HTML代码,如创建场景则只需一个<a-scene> 标签。
[*]声明式 HTML
aframe 通过 html 标签的方式,将大量的 3D 逻辑封装在内,容易阅读,理解和复制粘贴。
[*]ECS 架构
aframe 基于强大的 three.js框架, 同时提供声明式、组件化、可复用的实体组件结构。HTML只是冰山的一角,开发者可以自由的使用 JavaScript、DOM API,Three.js,WebVR,和 WebGL。
[*]A-Frame是专为Web开发者设计的
它基于 DOM,因此能像其他Web应用一样操作3D/VR内容。当然,也能结合box、d3、React等JavaScript 框架一起使用。
[*]A-Frame让代码结构化
Three.js代码通常是松散的,A-Frame在Three.js之上构建了一个声明式的实体组件系统(entity-component-system)。另外,组件能发布并分享出去,其他开发者能以 HTML的形式进行使用。
[*]跨平台
A-Frame 能构建能兼容主流头显设备的 VR 应用程序,如HTC Vive, Rift, Daydream, GearVR,Pico, Oculus乃至在普通电脑和手机上运行。
[*]工具无关性
由于是构建在 HTML 之上,所以 A-Frame 和大多数开发库、框架和工具如 react, vue,angular 等都能够兼容。
[*]可视化的检测工具
aframe 提供一个便捷的内置3D可视化检测工具。打开任意的A-Frame场景,Mac 敲击 <control> + <option> + <i> 或者 windows 敲击 <ctrl> + <alt> + i 组合键,将切换到3D元素检测模式。
[*]丰富的组件
aframe 内置了很丰富的组件,核心组件如几何模型(geometries),材料(materials),光线(lights),动画(animations),模式(models),光线投射(raycasters),阴影(shadows),定位音频(positional audio),文本(text),和 Vive / Touch / Daydream / GearVR / Cardboard 等控制。以及更多社区贡献的组件如:粒子系统(aframe-particle-system-component、物理系统(aframe-physics-system,多人模式(networked-aframe)、海洋(oceans)、山脉(mountain)、语音识别(aframe-speech-command-component)、运动捕捉(aframe-motion-capture)、瞬移(aframe-teleport-controls)、人手(aframe-super-hands-component)、以及增强现实(augmented-reality) 等等。
页: [1]
查看完整版本: A-Frame是什么?