使用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() // 加入動(dòng)畫

????})

})

這時(shí)如果運(yùn)行代碼，會報(bào)THREE.Loader: Handlers.get() has been removed. Use LoadingManager.getHandler() instead.的錯(cuò)

需要在node_module > three-obj-mtl-loader > index.js中找到第543行并注釋掉。在 545行重新定義loader

// var loader = THREE.Loader.Handlers.get( url );

var loader = manager.getHandler(url);

保存后，即可解決該問題