在上一篇小程序使用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工具类中下载