iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0
Modern Web

重新學習網頁設計系列 第 22

DAY 22. Three.js 總結

  • 分享至 

  • xImage
  •  

DAY 22. Three.js 總結

前面連續幾天陸陸續續介紹了關於Three最重要的幾個重點
因為每天時間有限的關係沒辦法給予很詳細的介紹,但希望有給大家一些想法

由於本人不是很有慧根,很多東西明明很簡單但我卻弄了很久
這裡就簡單分享一下我遇到的問題,希望對大家有幫助

Three API 遷移

如果你是使用最新版本的three, 可能常會在練習的過程中看到主控台console看到很多警告
通常Three會很貼心的在主控台console中給予相應的提示內容, 告訴你目前使用的方法在此版本已經被棄用, 請改用xxx方法代替。
雖然大部分的情況都能直接解決,但很重要的是或許該API的參數也有隨之更改而我們並不知道。
所以比較好的方法是直接查看three.js Migration-Guide的版本更新變動資訊
強力建議先把此頁內容大概地看過一遍, 這對之後練習時突然遇到的問題會有所幫助。
至於要重哪個版本開始看, 個人建議是從r83 ~ r86, 當然這還是要取決於你的教材所使用的版本。

Three Github 專案結構

在我一開始接觸three.js時, 有些有些事一直令我很困惑
不管是在網路上或是在書中的範例時常會使用一些Three本身不包含的建構子
例如有些載入器Loader不需要額外引入
但也有可能一個載入器Loader或其他相關資源需要被額外引入
這就很惱人了,到底這些東西需不需要被先引入,那如果需要他們又在哪裡呢?

回到 Three GitHub, 我們來了解一下專案結構

在了解以上專案結構後, 我們可以在src目錄裡看到很多資料夾, 也能看到載入器Loader的目錄loaders以及材質Material目錄materials以及其他很多很多... ,有此我們可以簡單了解到存在這目錄裡頭的內容是不需要被額外引用的

// example 1
let material = new THREE.MeshNormalMaterial()
// 由於我們能在 /src/materials/裡找到 MeshNormalMaterial.js
// 所以我們不用額外引用這個材質**Material**

// example 2
let loader = new THREE.OBJLoader()
// 由於這個 OBJLoader, 在 /src/loaders/目中並不存在, 因此我們需要額外

通常這些需要額外引入的資源, 通常能夠在 /examples/js/ 目錄中找到, 例如example 2裡的載入器OBJLoader就在 /examples/js/loaders/目中能夠找到 OBJLoader.js, 所以我們必須先引用它, 我們的THREE才會有OBJLoader建構子

...略
<body>
  ...略
  <script src="/dist/three.js"></script>
  <script src="/dist/OBJLoader.js"></script>
  <script src="/dist/app.js"></script>
</body>
...略

載入器Loader在此謹作為一個範例,還有很多矩形Geometry、控制器Control等等很多需要被額外引入,所以當遇到方法不存在時,除了檢查有沒有打錯字以外,就是先朝這方面下手。

關於Three的介紹就這麼多了
事實上Three的應用很多很廣,如果大家有興趣更深入的了解
在這篇提供幾個關鍵字給大家,希望對大家有幫助

  • Three 粒子特效
  • Three 物理引擎
  • Canvas (底層)
  • WebGL (底層)
  • Blender (3D軟體)

上一篇
DAY 21. Three.js 載入器 Loader
下一篇
DAY 23. Webpack 設定
系列文
重新學習網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言