使用Three.js加载外部模型(OBJ,JSON...等格式的模型文件)。
上代码:
yarn add three //three.js 核心模块
yarn add three-obj-mtl-loader //材质及模型加载器
使用:
import * as THREE from 'three' // THREE 基础库
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader' //THREE导入外部模型库
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) {
// 网孔对象
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() // 加入动画
})
})
这时如果运行代码,会报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);
保存后,即可解决该问题
网友评论