使用Three.js加載外部模型(OBJ,JSON...等格式的模型文件)柬姚。
上代碼:
yarn add three //three.js 核心模塊
yarn add three-obj-mtl-loader //材質(zhì)及模型加載器
使用:
import * as THREE from 'three' // THREE 基礎(chǔ)庫
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader' //THREE導(dǎo)入外部模型庫
vue代碼：
let manager = new THREE.LoadingManager()
let mtlLoader = new MTLLoader(manager)
mtlLoader.setTexturePath('../../static/3d/')
mtlLoader.setPath('../../static/3d/')
mtlLoader.setCrossOrigin(true)
mtlLoader.load('SpaceFighter03.mtl', function(materials) {
????materials.preload()
????let objLoader = new OBJLoader(manager)
????objLoader.setPath('../../static/3d/')
????objLoader.materials = materials
????objLoader.load('SpaceFighter03.obj', function(object) {
????????object.traverse((child) => {
????????????if(child instanceof THREE.Mesh) {
? ? ? ? ? ? ? // 網(wǎng)孔對象
? ? ? ? ? ? ? child.castShadow = true
? ? ? ? ? ? ? child.receiveShadow = true
????????????}
????????})
????????object.position.set(0, 0, 0)
????????object.scale.set(0.1, 0.1, 0.1)
? ? ? ? object.matrixWorldNeedsUpdate = true
????????object.castShadow = true
????????object.receiveShadow = true
????????_that.mesh = object
????????_that.scene.add(_that.mesh)
????????_that.initLight() // 加入光源
????????_that.animate() // 加入動畫
????})
})
這時如果運(yùn)行代碼，會報THREE.Loader: Handlers.get() has been removed. Use LoadingManager.getHandler() instead.的錯
需要在node_module > three-obj-mtl-loader > index.js中找到第543行并注釋掉泥兰。在 545行重新定義loader
// var loader = THREE.Loader.Handlers.get( url );
var loader = manager.getHandler(url);
保存后弄屡，即可解決該問題
