7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt.jsとthree.js(+loader)のsetup

Posted at

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を利用している場合は読み方変えた方がいいと思います。

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?