前端技術週刊 2018-07-30：Three.js

前端技術週刊 2018-07-30

前端快爆

• Ionic 4.0.0 beta 版發佈，新版本變化頗多，主要是採用了不少現代 Web 的 API，好比：Custom Elements，CSS Variables 和 Shadow DOM 等。🔗

  點評：最先由 Google 提出的 Web Components V0 系列規範幾乎全軍覆沒，其中 HTML Imports 完全拋棄。但隨後的 V1 系列規範獲得了多數瀏覽器的實現。在 Web 組件化的道路上，Google 也算是功不可沒。

• 最近 Github 的開發者宣佈已經完成移除 jQuery 的工做，所有改用瀏覽器原生 API 來代替，好比：querySelectorAll、fetch API、Custom Elements 等。🔗

  點評：jQuery 雖然大勢已去，但不得不認可，它對整個 Web 的發展仍是作出了不可磨滅的貢獻。

• Angular v6.1 發佈，主要支持了  TypeScript 2.9, 滾動定位（Scroll Positioning）等。🔗

  點評：若是說 React 是前端江湖中的「倚天劍」，那麼 Angular 就是「屠龍刀」。寶刀未老，依然能夠披荊斬棘。

• Chrome DevTools 團隊發佈了一個 Node.js 調試工具——ndb，其主要特色是更加專一於 Node.js 調試而不是網頁調試。比起以前的 --inspect + chrome://inspect/ 的方式，使用 ndb 調試起來更加方便，只須要在啓動 Node.js 程序時把 node 命令換成 ndb 便可，同時它擁有更好的多進程調試體驗、App 外代碼自動黑盒化、本地代碼直接保存等功能。🔗

  點評：與 VScode 的調試功能相比誰更好用呢？試試看吧！

• 早前發佈的 stylelint 9.3.0 中加入了完整的快應用和 vue 的單文件組件格式的支持。🔗

  點評：至此，快應用 和 vue 項目中單文件組件中的樣式部分沒有 linter 的歷史終於結束。

優秀 Demo

• 「掃雷」小遊戲

• React 圖片預覽插件

專題：Three.js

本週是由 @阿末 帶來的 Three.js 的相關專欄，做爲 WebGL 的基礎封裝，它讓前端開發 3D 相關的場景不用面臨低層次的 API，而只須要接觸 3D 圖形的通用抽象概念。

Three.js 基礎

• three.js 官網
• three.js 入門指南
• 圖解 WebGL & three.js 工做原理
• three.js 術語地圖
• three.js inspector

three.js 實戰

• 使用 three.js 在現代網頁上進行 3D 遊戲開發
• 使用 three.js 建立一個迷宮遊戲
• 使用 three.js 製做簡單的3D場景
• 使用 three.js 製做栩栩如生的圖片

three.js 應用場景：WebAR & VR 等

• WebAR
• Mozilla 的混合加強現實專欄
• WebVR 資源集錦 & 入門指南 & Starter Kit
• Google VR 的 360 度全景視頻/圖片
• videojs-vr: 基於 three.js 創建的 VR 視頻庫
• Gio.js: 基於 three.js 的 Web3D 可視化數據模型
• three.js x leap.js

---

本期編輯：@壹絲、@柯拓；審閱：@承虎(humphry) ；專題供稿：@阿末