小程序使用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的研究繼續中…