javascript

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

WebAR 可拆分兩個部分相機與圖片識別和3D模型 其實不名思義就是使用相機取得現實中的畫面作為背景,在藉由相當的 圖片辨識 的技術,在特定的座標位置,渲染出對應的 3D 模型,使使用者感受到與現實做連結,也就是 增强現實 (簡稱為 AR) 根據上面的敘述,我們可獨立分成兩個部分進行說明,這也是我個人在學習 Web AR 時,所得知的結論與紀錄 最廣受人知的 AR 範例:PokeMon GO WebAR 取得攝像鏡頭畫面 圖片識別 3D 圖形繪製與操作 相機與圖片識別

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

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

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

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

[JavaScript] JavaScript 重要觀念: By Value & By Reference

通常 初學者 在撰寫 JavaScript 腳本時,相信都有碰到過一個問題,就是有時候會 沒有辦法去掌握當前的 變數 (Variable) 現在的狀態是什麼 ?,尤其是針對 物件 (Object),的資料進行操作的時候,會發現物件內的元素不如自己的預期 下面是常見的實際案例: 可以閱讀後,去執行看看,如果執行的結果不是你預期的,那就應該認真把這篇文章看完了 let arr = [] let data = { id: 0 } for(let i = 0; i <