快捷導(dǎo)航

three.js載入常用類型3D模型的幾種方法

更新時間：2024年04月17日 10:28:32 作者：努力的小桑

通過Three.js的材質(zhì)和幾何體,我們可以很方便的創(chuàng)建基礎(chǔ)3D模型,下面這篇文章主要給大家介紹了關(guān)于three.js載入常用類型3D模型的幾種方法,需要的朋友可以參考下

1. OBJLoader模型加載器

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

// 創(chuàng)建一個 OBJLoader 的實例
const loader = new OBJLoader();

// 載入模型文件，參數(shù)url是模型文件的路徑，此處以 "example.obj" 為例
loader.load(
  'example.obj',

  // 加載完成后的回調(diào)函數(shù)
  function (obj) {
    // 當(dāng)模型加載完成后會調(diào)用該函數(shù)

    // 將模型添加到場景中
    scene.add(obj);
  },

  // 正在加載模型時的回調(diào)函數(shù)
  function (xhr) {
    // 進(jìn)度條代碼，可以在此編寫代碼，傳入 xhr.loaded 和 xhr.total，計算出加載進(jìn)度
  },

  // 加載出錯的回調(diào)函數(shù)
  function (err) {
    console.error('An error happened.');
  }
);

2. GLTFLoader模型加載器

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// 創(chuàng)建一個 GLTFLoader 的實例
const loader = new GLTFLoader();

// 載入模型文件，參數(shù)url是模型文件的路徑，此處以 "example.gltf" 為例
loader.load(
  'example.gltf',

  // 加載完成后的回調(diào)函數(shù)
  function (gltf) {
    // 當(dāng)模型加載完成后會調(diào)用該函數(shù)

    // 將模型添加到場景中
    scene.add(gltf.scene);
  },

  // 正在加載模型時的回調(diào)函數(shù)
  function (xhr) {
    // 進(jìn)度條代碼，可以在此編寫代碼，傳入 xhr.loaded 和 xhr.total，計算出加載進(jìn)度
  },

  // 加載出錯的回調(diào)函數(shù)
  function (err) {
    console.error('An error happened.');
  }
);

3. FBXLoader模型加載器

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

// 創(chuàng)建一個 FBXLoader 的實例
const loader = new FBXLoader();

// 載入模型文件，參數(shù)url是模型文件的路徑，此處以 "example.fbx" 為例
loader.load(
  'example.fbx',

  // 加載完成后的回調(diào)函數(shù)
  function (object) {
    // 當(dāng)模型加載完成后會調(diào)用該函數(shù)

    // 將模型添加到場景中
    scene.add(object);
  },

  // 正在加載模型時的回調(diào)函數(shù)
  function (xhr) {
    // 進(jìn)度條代碼，可以在此編寫代碼，傳入 xhr.loaded 和 xhr.total，計算出加載進(jìn)度
  },

  // 加載出錯的回調(diào)函數(shù)
  function (err) {
    console.error('An error happened.');
  }
);

4. ColladaLoader模型加載器

import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';

// 創(chuàng)建一個 ColladaLoader 的實例
const loader = new ColladaLoader();

// 載入模型文件，參數(shù)url是模型文件的路徑，此處以 "example.dae" 為例
loader.load(
  'example.dae',

  // 加載完成后的回調(diào)函數(shù)
  function (collada) {
    // 當(dāng)模型加載完成后會調(diào)用該函數(shù)

    // 將模型添加到場景中
    scene.add(collada.scene);
  },

  // 正在加載模型時的回調(diào)函數(shù)
  function (xhr) {
    // 進(jìn)度條代碼，可以在此編寫代碼，傳入 xhr.loaded 和 xhr.total，計算出加載進(jìn)度
  },

  // 加載出錯的回調(diào)函數(shù)
  function (err) {
    console.error('An error happened.');
  }
);

以上是幾種常用類型的三維模型的加載器及其使用方法，可以根據(jù)需要使用相應(yīng)的模型加載器來加載模型。