Vue Three.js 安装使用及处理examples中的包引用

在做一次项目过程中，我先根据需求写了一个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