DAY 21. Three.js 載入器 Loader

雖然Three提供了很多Geometory供我們使用，但真實世界的需求當然不可能那麼簡單，我們很有可能需要使用更特殊的3D模組，因此我們必須要能夠載入它們到我們3D場景之中。

Three有很提供各種3D格式的載入器，而預設的載入器用來載入json格式的模組。
3D檔案格式中並沒有包含json，這裡所用的json檔是Three作者所提供的add-on
我們能夠在Three的Github中找到, 作者提供兩種版本供我們使用

• Blender
• Maya

照著文件中的流程先將add-on安裝到軟體之中後，之後在軟體中打開3D模組，最後將模組以json格式匯出，接著這個json就能夠被Three預設的Loader的所使用。

如果你沒有使用過3D軟體的經驗，個人建議使用Blender，它不僅免費，而且跨平台。

載入器 Loader

/*
 | 建構式
 */
const loader = new THREE.Loader()

/*
 | 屬性
 */
loader.onLoadStart = function () {
    // 載入開始時觸發, 預設值為空function.
}

loader.onLoadProgress = function (xhr) {
    // 進度更新時觸發, 預設值為空function.
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}

loader.onLoadComplete = function () {
    // 載入完成時觸發, 預設值為空function.
}

loader.crossOrigin = 'doamin.com'   // 當模組來源跨域時需設定其網域名稱。

/*
 | 實際載入範例
 | 參數 moduleSrc: json檔來源
 | 回傳 geometory: 3D模組
 */
loader.load(moduleSrc, geom => {
    const material = new THREE.MeshNormalMaterial() 
    const mesh = new THREE.Mesh(geom, material)
    // scene.add(mesh)
})

載入器Loader使用方式就這麼簡單，記得最後結果加入場景後要render場景。
另外其他非預設的載入器可以在Three.js/Loaders中找到。

非預設Loader 範例

<!--
    HTML 載入 three.js與 Loader, 這裡以 OBJLoader為範例
-->
<script src="/js/three/three.js"></script>
<script src="/js/three/OBJLoader.js"></script>

/*
 | 建構式
 */
const OBJLoader = new THREE.OBJLoader()

// .... 略

Loader的使用方式大致都相同，因此不再贅述。
更多細節的使用請參照Three.js#Loader