three.js載入常用類型3D模型的幾種方法
three.js 載入 3D 模型的方法有很多種。以下是其中的一些:
1. OBJLoader模型加載器
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; // 創(chuàng)建一個(gè) OBJLoader 的實(shí)例 const loader = new OBJLoader(); // 載入模型文件,參數(shù)url是模型文件的路徑,此處以 "example.obj" 為例 loader.load( 'example.obj', // 加載完成后的回調(diào)函數(shù) function (obj) { // 當(dāng)模型加載完成后會(huì)調(diào)用該函數(shù) // 將模型添加到場(chǎng)景中 scene.add(obj); }, // 正在加載模型時(shí)的回調(diào)函數(shù) function (xhr) { // 進(jìn)度條代碼,可以在此編寫(xiě)代碼,傳入 xhr.loaded 和 xhr.total,計(jì)算出加載進(jìn)度 }, // 加載出錯(cuò)的回調(diào)函數(shù) function (err) { console.error('An error happened.'); } );
2. GLTFLoader模型加載器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // 創(chuàng)建一個(gè) GLTFLoader 的實(shí)例 const loader = new GLTFLoader(); // 載入模型文件,參數(shù)url是模型文件的路徑,此處以 "example.gltf" 為例 loader.load( 'example.gltf', // 加載完成后的回調(diào)函數(shù) function (gltf) { // 當(dāng)模型加載完成后會(huì)調(diào)用該函數(shù) // 將模型添加到場(chǎng)景中 scene.add(gltf.scene); }, // 正在加載模型時(shí)的回調(diào)函數(shù) function (xhr) { // 進(jìn)度條代碼,可以在此編寫(xiě)代碼,傳入 xhr.loaded 和 xhr.total,計(jì)算出加載進(jìn)度 }, // 加載出錯(cuò)的回調(diào)函數(shù) function (err) { console.error('An error happened.'); } );
3. FBXLoader模型加載器
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; // 創(chuàng)建一個(gè) FBXLoader 的實(shí)例 const loader = new FBXLoader(); // 載入模型文件,參數(shù)url是模型文件的路徑,此處以 "example.fbx" 為例 loader.load( 'example.fbx', // 加載完成后的回調(diào)函數(shù) function (object) { // 當(dāng)模型加載完成后會(huì)調(diào)用該函數(shù) // 將模型添加到場(chǎng)景中 scene.add(object); }, // 正在加載模型時(shí)的回調(diào)函數(shù) function (xhr) { // 進(jìn)度條代碼,可以在此編寫(xiě)代碼,傳入 xhr.loaded 和 xhr.total,計(jì)算出加載進(jìn)度 }, // 加載出錯(cuò)的回調(diào)函數(shù) function (err) { console.error('An error happened.'); } );
4. ColladaLoader模型加載器
import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js'; // 創(chuàng)建一個(gè) ColladaLoader 的實(shí)例 const loader = new ColladaLoader(); // 載入模型文件,參數(shù)url是模型文件的路徑,此處以 "example.dae" 為例 loader.load( 'example.dae', // 加載完成后的回調(diào)函數(shù) function (collada) { // 當(dāng)模型加載完成后會(huì)調(diào)用該函數(shù) // 將模型添加到場(chǎng)景中 scene.add(collada.scene); }, // 正在加載模型時(shí)的回調(diào)函數(shù) function (xhr) { // 進(jìn)度條代碼,可以在此編寫(xiě)代碼,傳入 xhr.loaded 和 xhr.total,計(jì)算出加載進(jìn)度 }, // 加載出錯(cuò)的回調(diào)函數(shù) function (err) { console.error('An error happened.'); } );
以上是幾種常用類型的三維模型的加載器及其使用方法,可以根據(jù)需要使用相應(yīng)的模型加載器來(lái)加載模型。
總結(jié)
到此這篇關(guān)于three.js載入常用類型3D模型的幾種方法的文章就介紹到這了,更多相關(guān)three.js載入3D模型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序封裝網(wǎng)絡(luò)請(qǐng)求和攔截器實(shí)戰(zhàn)步驟
這篇文章主要介紹了微信小程序封裝網(wǎng)絡(luò)請(qǐng)求和攔截器實(shí)戰(zhàn)步驟,這樣可以提高開(kāi)發(fā)效率,減少代碼重復(fù),同時(shí)也可以提高代碼的可維護(hù)性和可讀性2023-03-03理解Javascript的動(dòng)態(tài)語(yǔ)言特性
這篇文章主要介紹了理解Javascript的動(dòng)態(tài)語(yǔ)言特性,需要的朋友可以參考下2015-06-06微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過(guò)改變r(jià)gba的a值實(shí)現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實(shí)例形式分析了通過(guò)改變r(jià)gba的a值實(shí)現(xiàn)透明度漸變功能的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01JS數(shù)組中的splice()方法及用原生寫(xiě)法分享
這篇文章主要介紹了JS中數(shù)組的splice()方法,包括其用途、參數(shù)(起始位置、刪除元素個(gè)數(shù)、添加元素等)、不同參數(shù)情況的處理方式,還詳細(xì)講解了用原生JS手寫(xiě)splice()方法的思路和代碼實(shí)現(xiàn)2024-11-11基于javascript實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)限時(shí)搶購(gòu)
現(xiàn)如今做電商網(wǎng)站必不可少的一個(gè)效果就是限時(shí)搶購(gòu),這也是各大電商網(wǎng)站的一種促銷手段。如何實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu),本文為大家分享了javascript實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)的的相關(guān)代碼,感興趣的小伙伴們可以參考一下2016-04-04原生JS取代一些JQuery方法的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇原生JS取代一些JQuery方法的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09webpack4 入門(mén)最簡(jiǎn)單的例子介紹
這篇文章主要介紹了webpack4 入門(mén)最簡(jiǎn)單的例子介紹,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09JS中的算法與數(shù)據(jù)結(jié)構(gòu)之鏈表(Linked-list)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之鏈表(Linked-list),結(jié)合實(shí)例形式詳細(xì)分析了javascript中鏈表的概念、原理、定義及常用操作技巧,需要的朋友可以參考下2019-08-08