THREEJS基础各种Loader加载模型

wl_p
1,431 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

所用知识

GLTFLoader: threejs.org/docs/index.…

MMDLoader: threejs.org/docs/index.…

OBJLoader: threejs.org/docs/index.…

找模型

加载模型首先先要找到模型，目前我了解到的一些模型网站如下:

1.CG模型网: www.cgmodel.com/

2.模之屋:www.aplaybox.com/

3.sketchfab:sketchfab.com/

4.3d溜溜网:www.3d66.com/model.html

有别的网站安利可以再评论区留言哦，使用时请注意有关规定。

加载mmd模型

首先添加场景，摄像机，渲染器，灯光，轨道控制器等，然后用mmdloader加载mmd模型。

let mesh
const modelFile = './model/miku_v2.pmd';
const vmdFiles = [ 'model/wavefile_v2.vmd' ];
const loader = new MMDLoader();
loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
mesh = mmd.mesh;
mesh.position.y = - 10;
scene.add( mesh );})

通过mmdloader，我们可以看到我们的mmd模型被加载进来了。

loader1.png

加载obj模型

接下来我们用objloader加载obj格式的模型

let loader=new OBJLoader()
loader.load('./model/male02.obj',function (object)
{
  object.scale.set(0.05,0.05,0.05)
  scene.add(object)
})

我们可以看到我们的obj格式的模型被加载进来。

obj1.png 但是，这个模型看起来丑丑的，那是因为没有设置材质，材质可以通过MTLLoader加载进去捏。

加载FBX模型

接下来我们用FBXLoader加载fbx格式的模型

let loader=new FBXLoader()
loader.load('./model/nurbs.fbx',function (object)
{
  object.scale.set(0.5,0.5,0.5)
  scene.add(object)
})

我们可以看到我们的fbx格式的模型被加载进来了。

fbx1.png

加载GLTF模型

接下来我们用GLTFLoader加载gltf格式的模型

let loader=new GLTFLoader()
loader.load('./model/DamagedHelmet.gltf',function (object)
{
  object.scene.scale.set(2,2,2)
  scene.add(object.scene)
})

我们可以看到我们的gltf格式的模型被加载进来了。

gltf.png

加载dae模型

接下来我们用ColladaLoader加载dae格式的模型

let loader=new ColladaLoader( );
loader.load('./model/elf.dae',function (object)
{
  // object.scene.scale.set(2,2,2)
  scene.add(object.scene)
})

我们可以看到我们的dae格式模型被加载进来了

dae1.png

最后

还有一些loader大伙可以再去文档和example中了解一下。综上，我们可以发现，加载不同格式的模型，实际上就是换了一个loader而已，所以我们可以通过判断不同的后缀来使用与之匹配的loader实现一个可以加载所有种类模型的功能，完成一个模型加载平台。

avatar
文章
阅读
粉丝