iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 30
1
Modern Web

WebGL 與 Three.js 初探系列 第 30

[Day30] aframe 常見 API & 完賽心得

前幾天簡單地介紹了 aframe 基本使用跟 webVR 的趨勢。今天會介紹一些在 aframe 當中常用的技巧和 tag 當作結尾。

Animation

a-frame 當中,可以使用 a-animation 的方式來描述動畫,跟 svg 的 animation 定義有點類似:

<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>

這個 animation 定義了要採用動畫的 attr,起始值跟終止值。

CurvedImage

curved image 可以將圖片拉長成曲線形狀。

demo

Mixins

<a-mixin> 提供了一個介面讓常用的方法或是集合統整在一起,方便使用。

<a-assets>
  <a-mixin id="red" material="color: red"></a-mixin>
  <a-mixin id="blue" material="color: blue"></a-mixin>
  <a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>
<a-entity mixin="red cube"></a-entity>
<a-entity mixin="blue cube"></a-entity>

這樣一來就可以將常見的屬性、及何圖形給放入 entity 當中。


結尾

今天是鐵人賽的最後一天,感覺自己最後結尾的部分收得不是很好,也有很多部分都因為時間上的關係沒有很完整地介紹完。

挑戰 30 天連續發文的確是一件非常不容易的事情,自己也更了解到如果還有類似的機會,一定要事先做好準備才行,才不會突發狀況發生時,急就章地寫完文章結尾。

同時,這次挑戰的主題是以前從來沒有碰過的 webGL 及 3D 圖學。原本以為前 10 天的學習能夠掌握基本的知識,不過實際上要了解 webGL shader 的應用跟撰寫、活用 three.js API 等等,都需要相對應的圖形理論做補助,這樣框架用起來才能得心應手。

不過 10 天的學習完全不夠用,光是要了解 GSGL 的撰寫就要不少時間了,更別說應用在實際的計算上。儘管已經有框架幫我們處理掉底層的操作,但如果需要更進階、或是更強大的活用,就必須更了解背後的操作。

aframe 的部分,我會再找時間陸續補齊(如果有時間的話QQ)。未來也希望自己能夠繼續往 3D 之路邁進,讓前端畫面的展現更加豐富。

這絕對需要時間的累積跟練習,也比以往的前端開發更有挑戰性,不過這 30 天的確學習到了很多過去完全不懂的知識。過去望之生畏的 shader ,現在也能夠寫、也能夠看懂;three.js 的 API 有基本的認知和了解;同時也看了一下 webVR 的發展跟認識 aframe 這個框架。

這 30 天可以堪稱最充實的一個月了(笑)。我知道本系列文章中仍然有許多不完整的部分,但希望各位讀者或多或少都能從中獲得一些知識!謝謝大家


上一篇
[Day29] Aframe 範例 - 3D 與 d3.js
系列文
WebGL 與 Three.js 初探30

1 則留言

0
oxxo
iT邦研究生 2 級 ‧ 2017-01-13 23:45:55

恭喜完賽!
之後會慢慢拜讀這系列文章!
感謝您的分享!

我要留言

立即登入留言