如何使用ES6開發Three.js專案（二）

之前寫過一篇文章如何使用ES6開發Three.js專案（一），這次再完善一下，並把程式碼放在GitHub上了。

three.js-es6-webpack

基於ES6開發的three.js演示專案

專案目錄：

• public : 打包後文件夾
• src : 專案檔案
  • assets : 專案資原始檔夾,圖片視訊等
    • mapb.jpg
  • css :
    • index.css
  • util : 引入的js庫檔案
    • state.js
  • consts.js ：專案中的常量
  • main.js : 專案入口檔案
• index.html 頁面模板
• package.json
• webpak.config.js

執行結果

顯示三個帶紋理的物體。兩個球體，一個立方體。能夠通過orbitControls控制來控制場景。

演示地址

知識點

ES6 解構

在定義常量的時候用到了es6中物件的解構。把常量定義到window物件中，方便全域性訪問。
書籍《深入理解ES6》中對解構有詳細的介紹。

ES6 async await

處理非同步問題。有待研究。

紋理載入

紋理的載入使用了兩種不同的方式。一種在使用的時候載入，一種提前快取。

1. 直接載入，和之前的載入方式不一樣，需要通過require 的方式。

//let maps1 = new THREE.TextureLoader().load(./assets/mapd.jpg); 
let imgurl = require('./assets/mapd.jpg') 
let maps1 = new THREE.TextureLoader().load(imgurl);

2. 提前快取，非同步載入。
   返回一個Promise,所有圖片載入完成的時候為resolve 。

webpack部分配置說明

參考之前寫的一篇文章webpack入門使用教程

1. 使用 source map
   當 webpack 打包原始碼時，可能會很難追蹤到錯誤和警告在原始碼中的原始位置。例如，如果將三個原始檔（a.js, b.js 和 c.js）打包到一個 bundle（bundle.js）中，而其中一個原始檔包含一個錯誤，那麼堆疊跟蹤就會簡單地指向到 bundle.js。這並通常沒有太多幫助，因為你可能需要準確地知道錯誤來自於哪個原始檔。
   為了更容易地追蹤錯誤和警告，JavaScript 提供了 source map 功能，將編譯後的程式碼映射回原始原始碼。如果一個錯誤來自於 b.js，source map 就會明確的告訴你。
   source map 有很多不同的選項，以便可以根據需要進行配置。如下面兩種常用配置。
   devtool: ‘eval-source-map’, // 原始原始碼
   devtool: ‘inline-source-map’, // 原始原始碼

2. webpack-dev-server
   方便開發

3. HtmlWebpackPlugin
   提供html模板

4. DashboardPlugin
   webpack-dashboard是一統計和優化webpack日誌的工具，可以以表格形勢展示日誌資訊。其中包括構建過程和狀態、日誌以及涉及的模組列表

5. Lodash
   是一個一致性、模組化、高效能的 JavaScript 實用工具庫。
   Lodash 通過降低 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。
   Lodash 的模組化方法 非常適用於：

   • 遍歷 array、object 和 string
   • 對值進行操作和檢測
   • 建立符合功能的函式
   • 入口函式main.js中 _initStage 就使用了lodash/fp 簡化了程式碼。

版本1.0.1

2018年11月1日

github地址