AFrame工作原理简要说明

techbrood 发表于 2019-11-07 12:22:48

标签: webxr, webgl, a-frame

- +

AFrame(a-frame)是Mozilla推出的基于Three.js的一个WebXR ( WebVR ) 应用开发引擎。

其架构或设计模式为游戏引擎常用的Entity/Component/System。其总体思想是通过声明式语言的方式来创建实体、挂载组件,并通过系统(Systems)来提供基础服务如多相机系统、XR交互控制、存储系统等。

其工作过程大致如下:

1)在DOM文档中声明a-scene,a-box等元素


2)使用Web Component API的生命周期函数来创建和初始化对应于dom元素的three场景和3d对象

生命周期函数有:[ 'attachedCallback', 'attributeChangedCallback', 'createdCallback', 'detachedCallback' ]

比如在a-scene元素的createdCallback函数中,相应的创建一个three.js里的Scene对象:

this.object3D = new THREE.Scene();

同时通过属性来设置一些默认的组件(Components):

// Default components.
this.setAttribute('inspector', '');
this.setAttribute('keyboard-shortcuts', '');
this.setAttribute('screenshot', '');
this.setAttribute('vr-mode-ui', '');

在setAttribute函数里面会调用组件(Comopnent)的初始化方法:

// Component not yet initialized. Initialize component.
this.initComponent(attr, attrValue, false);

而在box(a-entity)元素的createdCallback函数中,创建一个object3d,在attachedCallback回调中添加到父节点中(可以是scene节点或者其他entity节点)

this.addToParent();


3)在a-scene的attachedCallback中初始化系统(Systems)

this.initSystems();

经过上面3个步骤,整个three.js的场景空间(场景树、节点、节点上附属的功能组件、相机系统等)已经基本构造完毕。


4)使用three.js的render循环来完成渲染

renderer.render(this.object3D, this.camera);


possitive(5) negative(0) views1756 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...

  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;

  • 常用光照类型基本概念工作原理及其计算公式

    在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...

  • HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published

    We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...

  • 创建非矩形网页页面元素的常用技术和实例代码

    非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...

  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • WebVR简介和常用资源链接

    什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...