-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path4、使用three.js.html
20 lines (19 loc) · 23.6 KB
/
4、使用three.js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>4、使用three.js</title>
<basefont face="微软雅黑" size="2" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="exporter-version" content="Evernote Windows/303788 (zh-CN, DDL); Windows/10.0.10586 (Win64);"/>
<style>
body, td {
font-family: 微软雅黑;
font-size: 10pt;
}
</style>
</head>
<body>
<a name="368"/>
<h1>4、使用three.js</h1>
<div>
<span><div>A-Frame框架是基于three.js开发的，所以支持所有的three.js的API。这一章主要讨论如何访问位于A-Frame框架下的three.js场景、对象和AIP。</div><div><br/></div><div>A-Frame和three.js是一一对应的关系</div><div><br/></div><div>a-frame框架</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><a-scene></div><div style="margin-left:40px;"><a-box></div><div style="margin-left:40px;"><a-sphere></a-sphere></div><div style="margin-left:40px;"><a-light></a-light></div><div style="margin-left:40px;"></a-box></div><div></a-scene></div></div><div>three.js框架</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>THREE.Scene</div><div style="margin-left:40px;">THREE.Mesh</div><div style="margin-left:40px;">THREE.Mesh</div><div style="margin-left:40px;">THREE.Light</div></div><div><br/></div><ul><li><span style="font-size: 19px;">访问three.js API</span></li></ul><div>three.js的是A-Frame框架的全局属性</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>console.log(THREE);</div></div><div>可以直接访问</div><div><br/></div><ul><li><span style="font-size: 19px;">使用 three.js的Objects</span></li></ul><div>访问three.js的Scene</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>document.querySelector('a-scene').object3D; // THREE.Scene</div></div><div><br/></div><div>并且每一个A-frame实体都能通过 <span style="color: rgb(51, 51, 51); font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 600; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;"><a-scene></span> Via.sceneEl访问</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>document.querySelector('a-entity').sceneEl.object3D; // THREE.Scene</div></div><div><br/></div><div>在组件里我们通过 <span style="color: rgb(51, 51, 51); font-family: "Fira Sans", Helvetica, Arial, sans-serif; font-size: 15.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">entity (i.e., </span><code style="margin: 0px; padding: 0px 0.25ch 0px 0.25ch; box-sizing: border-box; font-size: 13px; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-weight: 600; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px;">this.el</code><span style="color: rgb(51, 51, 51); font-family: "Fira Sans", Helvetica, Arial, sans-serif; font-size: 15.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">) 链接scene</span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>AFRAME.registerComponent('foo', {</div><div>init: function () {</div><div>var scene = this.el.sceneEl.object3D; // THREE.Scene</div><div>}</div><div>});</div></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><ul><li><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">访问实体的three.js对象</span></span></span></li></ul><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">每一个<a-entity>都有自己的Three.Object3D。具体包括各种类型，实体的根THREE.Group通过 via.object3D访问：</span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>document.querySelector('a-entity').object3D; // THREE.Group</div></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">实体还可以组装不同的THREE元素</span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><a-entity geometry light></a-entity></div></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">实体储存的THREE元素列表还能通过 .object3DMap访问</span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>console.log(entityEl.object3DMap);</div><div>// {mesh: THREE.Mesh, light: THREE.Light}</div></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">如果通过</span></span></span> <span style="color: rgb(51, 51, 51); font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 600; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">.getObject3D(name)访问就会这样</span></div><div><span style="font-weight: 600;"><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>entityEl.getObject3D('mesh'); // THREE.Mesh</div><div>entityEl.getObject3D('light'); // THREE.Mesh</div></div><div><span style="font-weight: 600;"><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-weight: 600;"><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(51, 51, 51);">现在我们看看这些three.js对象是如果设置的</span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><ul><li><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">在实体里设置 object3D </span></span></span></li></ul><div><span style="color: rgb(51, 51, 51); font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 600; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">.setObject3D(name) //创建object3D</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>AFRAME.registerComponent('pointlight', {</div><div>init: function () {</div><div>this.el.setObject3D('light', new THREE.PointLight());</div><div>}</div><div>});</div><div>// <a-entity light></a-entity></div></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">首先创造一个光，然后获取</span></span></span></div><div><span style="color: rgb(51, 51, 51); font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 600; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">.getObject3D(name)//获取object3D</span></div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>entityEl.getObject3D('light');</div></div><div><br/></div><div><font color="#333333" face="Fira Sans, Helvetica, Arial, sans-serif"><span style="font-size: 15px;">A-Frame 通过 via.el引用一个three.js的object</span></font></div><div><span style="font-size: 15px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>entityEl.getObject3D('light').el; // entityEl</div></div><div><span style="font-size: 15px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="color: rgb(51, 51, 51); font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 600; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">.removeObject3D(name) //</span><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">删除object3D </span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>AFRAME.registerComponent('pointlight', {</div><div>init: function () {</div><div>this.el.setObject3D('light', new THREE.PointLight());</div><div>},</div><div>remove: function () {</div><div>// Remove Object3D.</div><div>this.el.removeObject3D('light');</div><div>}</div><div>});</div></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div></span>
</div></body></html>