在做一次項(xiàng)目過程中，我先根據(jù)需求寫了一個(gè)demo绷耍，很快的就能跑起來展示出預(yù)期的效果。但是鲜侥，當(dāng)完成后遷移到Vue中時(shí)才發(fā)現(xiàn)有一些插件無法正常的使用褂始。如：MapControls、Earcut等描函，因?yàn)樗鼈兡J(rèn)并沒有添加到Three包中崎苗。糾結(jié)了一段時(shí)間，接下來展示如何使用：
一舀寓、安裝相關(guān)的依賴
1胆数、three.js安裝
> npm i three --save
2、導(dǎo)入/導(dǎo)出變量插件
> npm i imports-loader exports-loader --save-dev
3互墓、導(dǎo)入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不太熟的童靴)
最近很多人反饋這個(gè)插件怎么不起作用啊
結(jié)果都是因?yàn)橐肓吮镜啬Ｐ吐钭猓俏磳δＰ驮O(shè)置webpack加載器
下面用fbx和obj模型作為例子,教大家怎么對模型設(shè)置webpack加載器。其他格式的模型/.(fbx|obj)$/中的fbx和obj替換成你們需要的模型斑司，多種格式間用 | 銜接
首先一定要cnpm i url-loader --save-dev (如果模型太大可以使用file-loader)!!!!!!!!!!
本地的靜態(tài)資源我建議是最好用import引入渗饮，再不濟(jì)也需要用require(),直接寫相對路徑如果不熟悉webpack配置很容易造成dev靜態(tài)資源引入正常但build資源卻404
同樣是在module.rules 中添加
{
test: /\.(fbx|obj)$/,
loader: 'url-loader'
},
(下面就是最上面對應(yīng)的引入插件的方法)
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')
(下面就是最上面對應(yīng)的引入插件的方法)
}
}
extend(config, ctx) {
config.module.rules.push( {
test: /\.(fbx|obj)(\?.*)?$/,
loader: 'url-loader',
})
(下面就是最上面對應(yīng)的引入插件的方法)
}
9、 2019/03/13 關(guān)于引入LegacyJSONLoader的問題
直接引入LegacyJSONLoader加載json格式的模型,會(huì)報(bào)錯(cuò)讓THREE.ObjectLoader
直接使用THREE.ObjectLoader宿刮，又會(huì)報(bào)錯(cuò)需要LegacyJSONLoader來幫加載某個(gè)對象
結(jié)果看了源碼互站，需要'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 關(guān)于引入DRACOLoader的問題
關(guān)于設(shè)置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
