国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Three.js--》建模軟件如何加載外部3D模型?

這篇具有很好參考價值的文章主要介紹了Three.js--》建模軟件如何加載外部3D模型?。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

目錄

三維建模軟件的介紹

Blender官方文檔介紹

Blender軟件安裝

GLTF格式簡介

gltf不同文件形式


????????看過我之前講解的three文章的人都知道,我在創(chuàng)建模型的時候都沒有使用three.js自帶的一些簡單模型,而是引入外部的模型并加載到頁面上,簡言之:對于簡單的立方體、球體等類型,你可以通過three.js的幾何體相關(guān)的API快速實現(xiàn),不過復(fù)雜的模型,比如一輛轎車、一棟房子、一個倉庫,一般需要通過3D建模軟件來 實現(xiàn)。

三維建模軟件的介紹

3D美術(shù)常用的三維建模軟件,比如Blender(輕量開源)、3damx、C4D、maya等等,特殊行業(yè)項目可能涉及到行業(yè)軟件,比如機械相關(guān)(SW、UG)等,建筑相關(guān)(草圖大師、revit)。

3D建模與程序的分工流程是

3D美術(shù):使用三維建模軟件繪制3D模型,導(dǎo)出gltf等常見格式

程序員:加載解析三維軟件導(dǎo)出的三維模型

比如使用Blender三維建模軟件導(dǎo)出gltf格式模型,然后再通過threejs加載三維模型

程序員學(xué)習(xí)3D建模的好處:了解3D相關(guān)概念,想比較代碼,建模軟件給人的感覺更加形象容易理解。建模軟件與three.js代碼的交互,能與美術(shù)更好的配合,能夠知道建模軟件如何導(dǎo)出模型。

初學(xué)者該選擇什么建模軟件?博主推薦大家使用 Blender軟件 ,安裝簡易開源免費,易操作,接下來將簡單介紹一下Blender建模軟件的安裝:

Blender官方文檔介紹

首先先進入其下載官網(wǎng):Blender官網(wǎng) ,然后點擊官網(wǎng)主頁的 Download 進行下載,如下:

Three.js--》建模軟件如何加載外部3D模型?

進入下載頁面后,根據(jù)自己電腦的系統(tǒng)進行選擇,我個人電腦是window,選擇相應(yīng)系統(tǒng),這里建議下載 zip 格式,更方便快速安裝和不容易出錯。

Three.js--》建模軟件如何加載外部3D模型?

如果點擊沒反應(yīng),下拉到下圖所示位置再次點擊下載即可:

Three.js--》建模軟件如何加載外部3D模型?

如果想查看每次版本更新之后新增的一些功能,可以查閱?版本最新變化 ,這里可以借助翻譯軟件進行查看即可:

Three.js--》建模軟件如何加載外部3D模型?

點擊download下的demo files,就可以白嫖官方歷代閃屏文件和資產(chǎn)庫文件

Three.js--》建模軟件如何加載外部3D模型?

Three.js--》建模軟件如何加載外部3D模型?

Blender軟件安裝

下載 blender 軟件 zip 完成之后,接下來就可以進行相應(yīng)的安裝了,這里建議安裝到D盤,然后安裝路徑注意不要有中文路徑,避免渲染出錯。解壓壓縮包然后進入到文件當中,然后找到如下圖所示的文件發(fā)送到桌面快捷方式:

Three.js--》建模軟件如何加載外部3D模型?

找到桌面的快捷方式雙擊進行打開即可,進入軟件主頁面之后選擇對應(yīng)自己想要的語言,例如中文

Three.js--》建模軟件如何加載外部3D模型?

然后點擊空白處讓當前彈框消失即可,然后點擊菜單欄中的編輯選項,選擇偏好設(shè)置,取消勾選新建數(shù)據(jù),避免文件出錯。

Three.js--》建模軟件如何加載外部3D模型?

然后選擇系統(tǒng),勾選全部顯卡和CPU:

Three.js--》建模軟件如何加載外部3D模型?

然后撤銷設(shè)置建議設(shè)置成100即可:

Three.js--》建模軟件如何加載外部3D模型?

ok,blender的安裝與基礎(chǔ)設(shè)置就基本配置完成了,接下來可以隨時進行3D建模啦。

GLTF格式簡介

GLTF格式是新2015發(fā)布的三維模型格式,隨著物聯(lián)網(wǎng)、WebGL、5G的進一步發(fā)展,會有越來越多的互聯(lián)網(wǎng)項目Web端引入3D元素,你可以把GLTF格式的三維模型理解為jpg、.png格式的圖片一樣?,F(xiàn)在的網(wǎng)站,圖片基本是標配,對于以后的網(wǎng)站來說如果需要展示一個場景,使用3D來替換圖片表達也是很正常的事情。

圖片有很多格式,對于三維模型自然也是如此,Web開發(fā)的時候圖片會有常用格式,對于Web3D開發(fā)也一樣,肯定會根據(jù)需要選擇一個常見的大家都熟悉的格式,隨著時間的發(fā)展,GLTF必然稱為一個極為重要的標準格式。不僅three.,js,其它的WebGL三維引擎cesium、babylonjs都對gltf格式有良好的的支持。

Khronos Group組織2015發(fā)布了GLTF1.0版本,在2017年又發(fā)布了GLTF2.0版本,關(guān)于gltf的更多介紹和信息,可以查看github:https://github.com/KhronosGroup/glTF 。

gltf包含內(nèi)容:相比較obj、stl等格式而言,.gltf格式可以包含更多的模型信息。.gltf格式文件幾乎可以包含所有的三維模型相關(guān)信息的數(shù)據(jù),比如模型層級關(guān)系、PBR材質(zhì)、紋理貼圖、骨骼貼圖、變形動畫等等。

gltf格式信息:如果你有一定的前端基礎(chǔ),那么你對JSON一定不陌生,GLTF文件就是通過JSON的鍵值對方式來表示模型信息,比如meshes表示網(wǎng)格模型信息,materials表示材質(zhì)信息等。

.bin文件:有些gltf文件會關(guān)聯(lián)一個獲多個.bin文件,.bin文件以二進制形式存儲了模型的頂點數(shù)據(jù)等信息。.bin文件中的信息其實就是對應(yīng)gltf文件中的 buffers 屬性,buffers.bin中的模型數(shù)據(jù),可以存儲在 .gltf 文件中,也可以單獨一個二進制 .bin 文件。

二進制 .glb:gltf格式文件不一定就是以擴展名 .gltf 結(jié)尾, .glb就是gltf格式的二進制文件。比如你可以把 .gltf 模型和貼圖信息全部合成到一個 .glb 文件中,.glb文件相對 .gltf 文件體積更小,網(wǎng)絡(luò)傳輸自然更快。

gltf不同文件形式

三維建模軟件比如Blender,可以根據(jù)設(shè)置以不同形式導(dǎo)出gltf模型,比如單獨導(dǎo)出一個 .gltf 文件,比如單獨導(dǎo)出一個 .glb 文件,比如導(dǎo)出形式為:.gltf + .bin + 貼圖多個文件。

.gltf格式模型文件,有不同的組織形式。單獨 .gltf 文件、單獨 .glb文件、.gltf + .bin + 貼圖文件。

注意:貼圖等數(shù)據(jù)單獨是一個文件的時候,注意不要隨意改變子文件相對父文件gltf的目錄,以免找不到資源。這一點很重要,切記?。?!

這些不同形式的gltf模型,加載代碼其實沒啥區(qū)別,比如說我們通過3D建模軟件畫好一個模型之后,就可以通過建模軟件進行一個導(dǎo)出,如下:

Three.js--》建模軟件如何加載外部3D模型?

比如說這里我選擇導(dǎo)出gltf模型之后,可以自行選擇要導(dǎo)出的格式:

Three.js--》建模軟件如何加載外部3D模型?

ok,3d建模軟件的下載以及如何導(dǎo)出gltf模型的簡單介紹到這里就結(jié)束了,后期博主也可能會講解一點關(guān)于3D建模Blender的相關(guān)知識,關(guān)注博主,讓學(xué)習(xí)之路不再迷茫!文章來源地址http://www.zghlxwxcb.cn/news/detail-460284.html

到了這里,關(guān)于Three.js--》建模軟件如何加載外部3D模型?的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔相關(guān)法律責任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • three.js加載3D模型,在網(wǎng)頁上展示3D模型(.glb.gltf.fbx格式)

    three.js加載3D模型,在網(wǎng)頁上展示3D模型(.glb.gltf.fbx格式)

    Three.js是一款開源的主流3D繪圖JS引擎,簡單點,可以將它理解為three+js就可以了,three表示3D,js表示JavaScript的意思。 結(jié)構(gòu) ?.glb.gltf文件最好放在服務(wù)器上 放在本地容易報找不到的錯?.fbx格式文件可以在本地用3d看圖(win10自帶)打開另存為.glb格式 index.html代碼 js代碼 項目案例

    2024年02月11日
    瀏覽(102)
  • Three.js 3D建模必備基礎(chǔ)

    Three.js 3D建模必備基礎(chǔ)

    在 three.js 中,可見對象由幾何體和材質(zhì)構(gòu)成。 我們已經(jīng)了解了如何創(chuàng)建適用于點和線圖元的簡單幾何圖形,并且遇到了各種標準網(wǎng)格幾何圖形,例如 THREE.CylinderGeometry 和 THREE.IcosahedronGeometry。 在本節(jié)中,我們將了解如何從頭開始創(chuàng)建新的網(wǎng)格幾何體。 我們還將了解 three.js

    2023年04月09日
    瀏覽(19)
  • Three.js程序化3D城市建?!綩penStreetMap】

    Three.js程序化3D城市建?!綩penStreetMap】

    對于我在 Howest 的研究項目,我決定構(gòu)建一個 3D 版本的 Lucas Bebber 的“交互式講故事的動畫地圖路徑”項目。 我將使用 OSM 中的矢量輪廓來擠出建筑物的形狀并將它們添加到 3js 場景中,隨后我將對其進行動畫處理 推薦:用 NSDT編輯器 快速搭建可編程3D場景 為了使用 Node 和

    2024年02月11日
    瀏覽(25)
  • Three.js 模型加載及加載簡單動畫

    Three.js 模型加載及加載簡單動畫

    時間過的好快啊~再一次感嘆,忙忙碌碌一年又過去了,新年第一帖,新的一年也要加油呀! 簡單介紹下Three.js吧,Three.js是基于原生WebGL封裝運行的三維引擎,在所有WebGL引擎中,Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。因為使用簡單,入門比較容易。 Three.js的具體

    2024年02月12日
    瀏覽(24)
  • three.js添加3d模型

    three.js添加3d模型

    three官方的幾何體也就那么幾個,想要生成各種各樣的模型,其難度十分之大,這時引入外部模型也不失為一種選擇。具體引入辦法如下。 雖然名字為GLTFLoader,但實際上glb文件也是能加載的。 其中需要注意的是調(diào)節(jié)相機參數(shù)與相機位置,否則很有可能導(dǎo)致場景中看不見任何東

    2024年02月04日
    瀏覽(104)
  • Three.js加載FBX模型并解析骨骼動畫

    Three.js加載FBX模型并解析骨骼動畫

    通過Threejs先加載一個.FBX格式的三維模型文件,然后解析該文件中的骨骼動畫信息。? FBX 加載器 FBXLoader.js 加載fbx模型文件 加載模型文件,加載完成后,如果模型顯示位置不符合要求,可以通過Threejs程序進行平移、縮放等操作。 查看FBX模型幀動畫數(shù)據(jù) stl、obj都是靜態(tài)模型,

    2024年02月07日
    瀏覽(46)
  • Web3D開發(fā)經(jīng)驗分享:基于Three.js的Web3D建模案例

    Web3D開發(fā)經(jīng)驗分享:基于Three.js的Web3D建模案例

    個人主頁:?左本W(wǎng)eb3D,更多案例預(yù)覽請點擊==》?在線案例 個人簡介:專注Web3D使用ThreeJS實現(xiàn)3D效果技巧和學(xué)習(xí)案例 ?? ??積跬步以至千里,致敬每個愛學(xué)習(xí)的你。喜歡的話請三連,有問題請私信或者加微信 ????????隨著互聯(lián)網(wǎng)的快速發(fā)展,Web3D技術(shù)也越來越成熟,越來越

    2024年02月13日
    瀏覽(20)
  • Three.js--》實現(xiàn)3d小島模型搭建

    Three.js--》實現(xiàn)3d小島模型搭建

    目錄 項目搭建 初始化three.js基礎(chǔ)代碼 設(shè)置環(huán)境背景 設(shè)置水面樣式 添加天空小島 今天簡單實現(xiàn)一個three.js的小Demo,加強自己對three知識的掌握與學(xué)習(xí),只有在項目中才能靈活將所學(xué)知識運用起來,話不多說直接開始。 項目搭建 本案例還是借助框架書寫three項目,借用vite構(gòu)建

    2024年02月05日
    瀏覽(430)
  • Three.js--》實現(xiàn)3d踢球模型展示

    Three.js--》實現(xiàn)3d踢球模型展示

    目錄 項目搭建 初始化three.js基礎(chǔ)代碼 設(shè)置環(huán)境紋理加載模型 使用Cannon-es實現(xiàn)物理世界 今天簡單實現(xiàn)一個three.js的小Demo,加強自己對three知識的掌握與學(xué)習(xí),只有在項目中才能靈活將所學(xué)知識運用起來,話不多說直接開始。 項目搭建 本案例還是借助框架書寫three項目,借用

    2024年02月11日
    瀏覽(100)
  • Three.js--》實現(xiàn)3d地球模型展示

    Three.js--》實現(xiàn)3d地球模型展示

    目錄 項目搭建 實現(xiàn)網(wǎng)頁簡單布局 初始化three.js基礎(chǔ)代碼 創(chuàng)建環(huán)境背景 加載地球模型 實現(xiàn)光柱效果 添加月球模型 今天簡單實現(xiàn)一個three.js的小Demo,加強自己對three知識的掌握與學(xué)習(xí),只有在項目中才能靈活將所學(xué)知識運用起來,話不多說直接開始。 項目搭建 本案例還是借

    2024年02月08日
    瀏覽(93)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包