在做一次項目過程中，我先根據需求寫了一個demo，很快的就能跑起來展示出預期的效果。但是，當完成后遷移到Vue中時才發現有一些插件無法正常的使用。如：MapControls、Earcut等，因為它們默認并沒有添加到Three包中。糾結了一段時間，接下來展示如何使用：

一、安裝相關的依賴

1、three.js安裝

> npm i three --save

2、導入/導出變量插件

> npm i imports-loader exports-loader --save-dev

3、導入examples的包

cnpm i import-three-examples --save-dev

二、webpack的配置

1、 webpack config

const ThreeExamples = require('import-three-examples')

module.exports = {
  ......
  ......
  module: {
    rules: [
      ......
      ......
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      ...ThreeExamples
    ]
  }
}

2、 render page/js

import OrbitControls from "three/examples/js/controls/OrbitControls"
import FBXLoader from "three/examples/js/loaders/FBXLoader"

......
......

let controls = new OrbitControls(camera, el)

let fbx = new FBXLoader()

fbx.load(url, function (_obj) {
  console.log(_obj)
})

......
......

3、 2019/01/11 vue-cli 3.0+ 的webpack配置:

vue.config.js

const ThreeExamples = require('import-three-examples')

module.exports = {
    chainWebpack: config => {
        ThreeExamples.forEach((v) => {
            if (~v.use.indexOf('imports')) {
                config.module
                    .rule(`${v.test}_i`)
                    .test(require.resolve(v.test))
                    .use(v.use)
                    .loader(v.use)
            } else {
                config.module
                    .rule(`${v.test}_e`)
                    .test(require.resolve(v.test))
                    .use(v.use)
                    .loader(v.use)
            }
        })
    }
}

4、 2019/01/17 nuxt 中的配置

nuxt.config.js

const ThreeExamples = require('import-three-examples')

module.exports = {
  build: {
    extend(config, ctx) {
      ThreeExamples.forEach((v, i) => {
        config.module.rules.push({
          test: require.resolve(v.test.split('/node_modules/')[1]),
          use: v.use
        })
      })
    }
  }
}

8、 2019/03/08 說明一下(僅針對webpack不太熟的童靴)

最近很多人反饋這個插件怎么不起作用啊
結果都是因為引入了本地模型，但是未對模型設置webpack加載器
下面用fbx和obj模型作為例子,教大家怎么對模型設置webpack加載器。其他格式的模型/.(fbx|obj)$/中的fbx和obj替換成你們需要的模型，多種格式間用 | 銜接
首先一定要cnpm i url-loader --save-dev (如果模型太大可以使用file-loader)!!!!!!!!!!
本地的靜態資源我建議是最好用import引入，再不濟也需要用require(),直接寫相對路徑如果不熟悉webpack配置很容易造成dev靜態資源引入正常但build資源卻404

• webpack

同樣是在module.rules 中添加

{
  test: /\.(fbx|obj)$/,
  loader: 'url-loader'
},
(下面就是最上面對應的引入插件的方法)

• vue-cli 3.0

vue.config.js

const ThreeExamples = require('import-three-examples')

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('obj')
            .test(/\.(fbx|obj)$/)
            .use('file-loader')
            .loader('file-loader')
            (下面就是最上面對應的引入插件的方法)
    }
}

• nuxt

extend(config, ctx) {
  config.module.rules.push( {
    test: /\.(fbx|obj)(\?.*)?$/,
    loader: 'url-loader',
  })
   (下面就是最上面對應的引入插件的方法)
}

9、 2019/03/13 關于引入LegacyJSONLoader的問題

直接引入LegacyJSONLoader加載json格式的模型,會報錯讓THREE.ObjectLoader
直接使用THREE.ObjectLoader，又會報錯需要LegacyJSONLoader來幫加載某個對象
結果看了源碼，需要'THREE' in window && 'LegacyJSONLoader' in THREE 才行
解決辦法如下

window.THREE = {}
import * as THREE from 'imports-loader?THREE\.LegacyJSONLoader=three/examples/js/loaders/deprecated/LegacyJSONLoader!three'

var loader = new THREE.ObjectLoader();
loader.load(url, (o) => {
  console.log(o)
});

10、 2019/05/27 關于引入DRACOLoader的問題

關于設置DRACOLoader.setDecoderPath路徑的問題

import DRACOLoader from 'imports-loader?DracoDecoderModule=three/examples/js/libs/draco/draco_decoder.js!three/examples/js/loaders/DRACOLoader'
DRACOLoader.setDecoderPath("../libs/draco")
drcLoader.load(url, function (geometry) {
    var material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );
})

三、使用示例

• 包引用

  
  
  image.png

• vue.config.js 配置

  
  
  image.png
  
  
  image.png

• page.vue 使用

  
  
  image.png
  
  
  image.png

• 效果

  
  
  image.png
  
  
  image.png