在做一次项目过程中，我先根据需求写了一个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
同样是在module.rules 中添加
{
test: /\.(fbx|obj)$/,
loader: 'url-loader'
},
(下面就是最上面对应的引入插件的方法)
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')
(下面就是最上面对应的引入插件的方法)
}
}
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
