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(17) views5287 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章