Nuxt環境にてthree.jsを利用する際、loaderやcontrolesも利用することが圧倒的に多いと思います。
自分の中で利用方法が固まってきたのでメモ。
こうした方がいいよーなどあればよろしくお願いします。
before
threeComp.vue
...
<script>
import * as THREE from 'three'
import 'imports-loader?THREE=three!three/examples/js/loaders/OBJLoader.js'
import 'imports-loader?THREE=three!three/examples/js/loaders/MTLLoader.js'
import 'imports-loader?THREE=three!three/examples/js/loaders/PLYLoader.js'
import 'imports-loader?THREE=three!three/examples/js/loaders/GLTFLoader.js'
import 'imports-loader?THREE=three!three/examples/js/controls/OrbitControls.js'
export default {
name: 'threeComp',
methods: {
init () {
const scene = new THREE.Scene()
..
error log
..
100:26-41 "export 'OBJLoader' (imported as 'THREE') was not found in 'three'
..
101:26-41 "export 'MTLLoader' (imported as 'THREE') was not found in 'three'
..
動くのですがエラー吐いてます。まずいですね。
after
new! /plugins/three.js
import Vue from 'vue'
import * as THREE from 'three'
import 'imports-loader?THREE=three!three/examples/js/loaders/OBJLoader.js'
import 'imports-loader?THREE=three!three/examples/js/loaders/MTLLoader.js'
import 'imports-loader?THREE=three!three/examples/js/loaders/PLYLoader.js'
import 'imports-loader?THREE=three!three/examples/js/loaders/GLTFLoader.js'
import 'imports-loader?THREE=three!three/examples/js/controls/OrbitControls.js'
Vue.use({
install (Vue, options) {
Vue.prototype.$THREE = THREE
}
})
add nuxt.config.js
module.exports = {
plugins: [
..
{ src: '~plugins/three', ssr: false }, |
..
],
}
mod threeComp.vue
...
<script>
// import * as THREE from 'three'
// import 'imports-loader?THREE=three!three/examples/js/loaders/OBJLoader.js'
// import 'imports-loader?THREE=three!three/examples/js/loaders/MTLLoader.js'
// import 'imports-loader?THREE=three!three/examples/js/loaders/PLYLoader.js'
// import 'imports-loader?THREE=three!three/examples/js/loaders/GLTFLoader.js'
// import 'imports-loader?THREE=three!three/examples/js/controls/OrbitControls.js'
export default {
name: 'threeComp',
methods: {
init () {
// const scene = new THREE.Scene()
const scene = new this.$THREE.Scene()
..
でうまくいきます。three(+α)をvueに配置しているので、ごく一部でthreeを利用している場合は読み方変えた方がいいと思います。