javascript

Web AR 入門： AR.js Tracking.js Three.js A-frame.js

Web AR 入門： AR.js Tracking.js Three.js A-frame.js

8 min read javascriptwebAR
WebAR 可拆分兩個部分相機與圖片識別和3D模型 其實不名思義就是使用相機取得現實中的畫面作為背景，在藉由相當的 圖片辨識 的技術，在特定的座標位置，渲染出對應的 3D 模型，使使用者感受到與現實做連結，也就是 增强現實 (簡稱為 AR) 根據上面的敘述，我們可獨立分成兩個部分進行說明，這也是我個人在學習 Web AR 時，所得知的結論與紀錄 最廣受人知的 AR 範例：PokeMon GO WebAR 取得攝像鏡頭畫面 圖片識別 3D 圖形繪製與操作 相機與圖片識別
[JavaScript] 抽象語法樹 Abstract syntax tree ：打包工具 與 代碼編譯 的核心原理

[JavaScript] 抽象語法樹 Abstract syntax tree ：打包工具 與 代碼編譯 的核心原理

2 min read javascript
在前端開發中，我們往往會使用一些前端的開發工具來提升我們開發的效率和速度 比較常見的工具包含： Webpack (代碼打包工具) ESLint （Conding Style 管理工具） Babel (ES6 代碼的編譯工具) … 不過上面舉例的項目基本上都跟我們在編譯時，撰寫的代碼比較又直接關係 這是如何做到的？ 這是一個還蠻有趣的問題，讓我們繼續往下看 拿 Babel 來舉例，他是如何直接將 ： // ES6 的箭頭函式 const myfn() => { return 'hello world' } // 轉譯為 ES5 var
[JavaScript] 檢查 DOM 載入狀態 Document.readyState

[JavaScript] 檢查 DOM 載入狀態 Document.readyState

3 min read javascript
有點經驗的前端工程師都知道需要使用 window.onload 、 addEventListener('load') 或是 jQuery 的 $(document).ready() 來確定 DOM 載入完成， 用來確保 JavaScript 不會因為找不到 DOM ， 而導致程式無法運行 不過只是單單使用上面的監聽方式是不夠的，這邊分享一下實際踩雷的經驗 當今天有使用者使用你開發的套件的時候，他不一定會在一開始就會載入你開發的套件 用下面的代碼來解釋： game.js const run = () => { const startGame = document.createTextNode('活動開始嘍～