[Ionic]爲什麼會報Cannot read property 'addEventListener' of undefined at new OrbitControls?

開發環境

• Ionic4 + Angular8 + Threejs(r111)
• Ubuntu18.04
• Visual Studio Code

錯誤提示

項目中使用到了threejs庫, 在添加了OrbitControls之後構建出現瞭如下錯誤:

VM1988 vendor.js:40772 ERROR TypeError: Cannot read property 'addEventListener' of undefined
 at new OrbitControls (VM2167 pages-home-home-module.js:64021)

原因解析及解決方法

這是由於threejs新版(r109之後)與上一個版本的兼容性引起的, 舊版在創建OrbitControls對象時的寫法是OK的:

// controls: OrbitControls;
this.controls = new OrbitControls(this.camera);

在新版裏則需要同時傳入渲染器的domElement對象,如:

this.controls = new OrbitControls(this.camera, this.renderer.domElement);