先來看一下three.js包的目錄結構：

我們使用的時候，可以一次性import所有的功能，也可以按需引入，全依賴three.module.js這個檔案對three.js的功能作了模組化處理；

但是，該模組化處理的功能僅僅是引入了src下面的所有功能類，實際開發中，我們還需要拓展包（examples）裡面的諸多功能，但是如果還像之前一樣直接例項化物件的話，會報如下錯誤：

這是因為，PointerLockControls這個方法（類）是在拓展包裡面的，而three.module.js並沒有將其引入（如果你是通過script標籤引入該功能的話，後面的內容可以無視），所以，我們需要手動引入該功能模組。

一、PointerLockControls.js模組化

先開啟three/examples/js/controls/PointerLockControls.js檔案，它是這樣的：

因為是在THREE這個物件上新增的屬性（方法），所以通過script標籤直接引入是沒有任何問題的，但是我們現在要做的是將其模組化：

①將該檔案中所有THREE.PointerLockControls替換成PointerLockControls；

②防止該功能模組有對其他three.js模組的依賴，引入three.js

③檔案開頭用var申明PointerLockControls；

④檔案末尾新增export；

二、three.module.js引入拓展模組

開啟three/build/three.module.js檔案至末尾，新增該模組：

三、在你的頁面直接呼叫該模組吧

這樣，你就可以像呼叫其他three.js模組類一樣，直接呼叫該拓展類了。