A-frame
QUADRO DI REALTÀ VIRTUALE
虚拟现实框架
〞
COS'È L'A-FRAME？
什么是A-frame
1.A-Frame è un framework di sviluppo web per la creazione di applicazioni di realtà virtuale (vr). È basato su HTML ed è facile da iniziare.
2.A-Frame è molto più di un semplice motore di rendering di scene 3D o un linguaggio di markup.
3. La sua idea principale si basa su Three.js per fornire componenti personalizzati ed estensibili e strutture di programmazione ottimizzate.
1.A-Frame是一个用来构建虚拟现实（vr）应用的网页开发构架，基于HTML,容易上手。
2.A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言。
3.其核心思想是基于Three.js来提供一个声明式、可扩展以及组件化的编程结构。
iniziare a utilizzare
A-frame的开发方式其实就是使用普通的HTML文件，而无需安装任何插件。
可以使用glitch在线开发工具，自动在代码中引入A-frame框架，帮助用户快速构建一个可在线部署和访问的应用，或者本地编写代码然后自行发布到网上，只需在HTML代码的元素中手动引入A-Frame框架。
开始使用
Il metodo di sviluppo di A-frame consiste in realtà nell'utilizzare normali file HTML senza installare alcun plug-in.È possibile utilizzare lo strumento di sviluppo online glitch per introdurre automaticamente i framework nel codice per aiutare gli utenti a creare rapidamente un'applicazione che possa essere distribuita e accessibile online, oppure è possibile scrivere il codice localmente e quindi pubblicarlo su Internet da soli, semplicemente introducendolo manualmente il framework A-frame nel codice HTML。
1
Semplificare la produzione VR
简化VR制作
2
HTML dichiarativo
声明式HTML
3
VR multipiattaforma
跨平台VR
5
alte prestazioni
高性能
4
Architettura dei componenti entità
实体-组件架构
6
Strumenti di ispezione visiva
可视化检测工具
7
componenti
Semplificare la produzione VR
组件
简化VR制作
caratteristica特性
简化VR制作
只需要引入<script> 标签与<a-scene>。A-Frame 将处理 3D 样板、VR 设置和默认控件。无需安装，无需构建步骤。
Semplificare la produzione VR
Basta introdurre il tag <script> e <a-scene>. A-Frame gestirà i modelli 3D, le impostazioni VR e i controlli predefiniti. Nessuna installazione richiesta, nessun passaggio di creazione richiesto.
声明式HTML
HTML 易于阅读、理解以及复制和粘贴。 A-Frame 基于 HTML，每个人都可以使用：Web 开发人员、VR 爱好者、艺术家、设计师、教育工作者、创客、孩子。
HTML dichiarativo
L'HTML è facile da leggere, comprendere, copiare e incollare. A-Frame è basato su HTML e può essere utilizzato da tutti: sviluppatori web, appassionati di realtà virtuale, artisti, designer, educatori, maker, bambini.
跨平台VR
为 Vive、Rift、Meta Quest、Windows Mixed Reality 和 Cardboard 构建 VR 应用程序，并支持所有相应的控制器。A-Frame 也适用于标准台式机和智能手机。
VR multipiattaforma
Crea app VR per Vive, Rift, Meta Quest, Windows Mixed Reality e Cardboard, con supporto per tutti i controller corrispondenti. A-Frame funziona anche con desktop e smartphone standard
实体组件架构
Architettura dei componenti dell'entità
A-Frame è un potente framework Three.js che fornisce una struttura di componenti di entità dichiarativa, componibile e riutilizzabile. L'HTML è solo la punta dell'iceberg; gli sviluppatori hanno accesso illimitato a JavaScript, DOM API, Three.js, WebVR e WebGL.
高性能
A-Frame 针对 WebVR 进行了彻底优化。虽然 A-Frame 使用 DOM，但它的元素不接触浏览器布局引擎。 3D 对象更新全部在内存中完成，几乎没有缓存和开销。最具互动性和大规模的 WebVR 应用程序已在 A-Frame 中完成，以 90fps 流畅运行。
alte prestazioni
A-Frame è completamente ottimizzato per WebVR. Sebbene A-Frame utilizzi il DOM, i suoi elementi non toccano il motore di layout del browser. Gli aggiornamenti degli oggetti 3D vengono tutti eseguiti in memoria quasi senza memorizzazione nella cache e sovraccarico. Le applicazioni WebVR più interattive e su larga scala sono state realizzate in A-Frame e funzionano senza problemi a 90 fps.
可视化工具
A-Frame 提供了一个方便的内置视觉 3D 检查器。打开任何 A 形框架场景，点击<ctrl> + <alt> + i或<ctrl> + <option> + i，将切换到3D元素检测模式。
Strumenti di visualizzazione
A-Frame fornisce un comodo ispettore visivo 3D integrato. Apri qualsiasi scena A-frame e fai clic su <ctrl> + <alt> + i o <ctrl> + <opzione> + i per passare alla modalità di rilevamento degli elementi 3D.
各种组件
使用 A-Frame 的核心组件（例如几何图形、材质、灯光、动画、模型、光线投射器、阴影、位置音频、文本和大多数主要耳机的控件）开始运行。进一步了解数百个社区组件，包括环境、状态、粒子系统、物理、多用户、海洋、隐形状态、手势识别（Leapmotion)和增强现实。
componenti
Inizia a utilizzare i componenti principali di A-Frame come geometria, materiali, luci, animazioni, modelli, raycaster, ombre, audio posizionale, testo e controlli per la maggior parte dei principali visori. Scopri di più su centinaia di componenti della community, inclusi ambienti, stati, sistemi di particelle, fisica, multiutente, oceani, stati invisibili, riconoscimento dei gesti (Leapmotion) e realtà aumentata.
CASI STUDIO案例分享
ESERCIZIO练习
1. Costruisci poligono
2. Aggiungi testo
3. Aggiungi effetti speciali ai fuochi d'artificio
4. Aggiungi un cilindro rimbalzante
1：加入多边形
2：加入文字
3：加入烟花特效
4：加入弹跳的圆柱体
Codice HTML
可以自行更改位置与旋转的数据
如position="-2 3 -3" （X Y Z) rotation="0 45 0"（X Y Z)
也可以修改颜色
如#000000
Puoi modificare tu stesso i dati di posizione e rotazione
Ad esempio position="-2 3 -3" (X Y Z) rotation="0 45 0" (X Y Z)
Puoi anche modificare il colore
Ad esempio #000000
Codice HTML
1.
<a-dodecahedron></a-dodecahedron>
<a-dodecahedron color="#FF926B" radius="1"></a-dodecahedron>
2.
<a-text></a-text>
<a-text position="0 3 -3" rotation="0 0 0" color="#4CC3D9" value="NIHAO!"value="Ciao!"></a-text>
3.
<script></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<a-entity></a-entity>
<a-entity position="0 2.25 -12" particle-system="color: #EF0000,#44CC00"></a-entity>
Codice HTML
4.
<script src="https://unpkg.com/aframe-animation-component@^4.1.2/dist/aframe-animation-component.min.js"></script>
<a-cylinder position="2 3 -3" rotation="0 45 0" color="#F55" radius="0.5"
animation="property: color; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: #5F5"
animation__scale="property: scale; dir: alternate; dur: 200;
easing: easeInSine; loop: true; to: 1.2 1 1.2"
animation__yoyo="property: position; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: -2 2 -3"></a-cylinder>
Codice HTML
360 immagine
Minimal
By Dengyuan Ma
