小程序使用threejs第四篇—加载3D模型

在上一篇小程序使用threejs第三篇—介绍几种几何模型中我们介绍了几种几何模型，那么我们就会好奇，如何加载外部的3d模型呢，因为那些好像更炫丽。
外部3D模型格式很多，常用的有gltf、obj、glb等，但是也没有形成类似于2d图片jpg、png这样具有统一标准的规模，同时目前好像没有一个通用的加载器可以兼容所有的，所以也带来一些总觉得乱七八糟的困扰。所以我们这里也就简单介绍一下。

gltf

效果

体验

加载器使用

import gLTF from '../../jsm/loaders/GLTFLoader'

	let GLTFLoader = gLTF(THREE);
	const gltfLoader = new GLTFLoader();
    gltfLoader.load('https://6e6f-norma-1300924598.tcb.qcloud.la/threejs/gltf/RobotExpressive.glb?sign=bb322025493be1666b9661bab259&t=1582770171', (gltf) => {
      const root = gltf.scene;
      scene.add(root);
    }, (e) => {
      console.log(e)
    });

这里需要到的加载器GLTFLoader可在threejs工具类中下载

obj

效果

体验

加载器使用

import getOBJLoader from '../../jsm/loaders/OBJLoader.js';

  	let OBJLoader = getOBJLoader(THREE);
	let loader = new OBJLoader(manager);
    loader.load('https://6e6f-norma-1300924598.tcb.qcloud.la/threejs/obj/male02.obj?sign=a01ae6dd2ac8e39fa008429663&t=1582720018', function(obj) {
      object = obj;
      scene.add(object)
    }, onError);

这里需要到的加载器OBJLoader可在threejs工具类中下载

关于threejs的研究继续中…