【Vue.js & Three.js】WARNING: export 'Math' (imported as 'THREE') was not found in 'three' の対処法

今回は，Vue.jsとThree.jsを用いて，Webアプリケーションを作成していた際に詰まったエラーを紹介します．

目次

• 経緯
• エラー内容
• 対処法
• 補足

経緯

まず，Vue.js上でThree.jsを扱うために，npmでthreeをインスールしました．

$ npm install three --no-package-lock

実際にエラーが出たコードが以下のTHREE.Math.degToRadの部分です

vue.js(Sample.vue)

<script>
import * as THREE from 'three'

export default {
  methods: {
    computeCameraOrientation: function() {
      this.phi = THREE.Math.degToRad(90);
    }
  }
}
</script>

エラー内容

以下は，npm run serveした際の警告文です．

Warning
export 'Math' (imported as 'THREE') was not found in 'three' 
・・・・

以下は，Webのコンソールログのエラー文です．

cannot read properties of undefined (reading 'degToRad')

対処法

書き方は2通りありますが，私的には方法2がおすすめです！！！
Mathではなくて，MathUtilsを用いてることで解決します．

方法1

vue.js(Sample.vue)

<script>
import { MathUtils } from "three"

export default {
  methods: {
    computeCameraOrientation: function() {
   　　this.phi = MathUtils.degToRad(40);
    }
  }
}
</script>

方法2

vue.js(Sample.vue)

<script>
import * as THREE from 'three'

export default {
  methods: {
    computeCameraOrientation: function() {
   　　this.phi = THREE.MathUtils.degToRad(40);
    }
  }
}
</script>

補足

以下の記事を参考にして解決しました．
Building an interactive web portfolio with Vue + Three.js — Part Three: Implementing Three.js