Three.js開發指南(10):載入和使用紋理
將紋理應用到網格上
10.1 在材質中使用紋理
紋理有幾種不同的用法,可以用它們來定義網格的顏色,也可以用它們來定義高光、凹凸和反光。但我們首先要看的是最基礎的方法,用紋理為網格上的每個畫素指定顏色。
載入紋理並應用到網格:紋理最基礎的用法是在材質上設定貼圖。幾乎所有圖片都可以當作紋理來使用。但是為了達到最佳效果,最好使用正方形的圖片,其長寬大小是2的次方。例如大小為256x256、512x512、1024x2014的圖片最合適。由於紋理需要放大和縮小,所以紋理上的畫素通常不會一對一地對映成面上的畫素。
可以使用mipmap,一組紋理圖片,每個圖片的尺寸都是前一張圖片的一半。這些圖片是在載入紋理時建立的,可以生成比較光滑的過濾效果。
使用凹凸貼圖建立皺紋:凹凸貼圖的目的是為材質增加厚度
使用法向貼圖建立更加細緻的凹凸和皺紋:使用法向貼圖你只需用很少的頂點和麵,就可以建立出細節非常豐富的模型。
使用光照貼圖建立假陰影:預先渲染好的陰影,可以用它來模擬真實的陰影。只對靜態場景有效。
用環境貼圖建立虛假的反光效果:計算環境反光非常耗費CPU,而且通常會使用光線追蹤演算法。
高光貼圖:你可以為材質指定一個閃亮的、色彩明快的貼圖
10.2 紋理的高階用途
定製UV對映:通過UV對映你可以指定紋理的哪一部分顯示在物體表面上。
在畫布上繪製圖案並作為紋理:用畫布作紋理,使用literally庫建立一個互動式的畫布。
用視訊輸出作為紋理:
相關文章
- Three.js開發指南(8):建立、載入高階網格和幾何體JS
- Three.js開發指南(4):使用Three.js的材質JS
- Three.js開發指南(11):定製著色器和渲染後期處理JS
- Three.js開發指南(3):使用Three.js裡的各種光源JS
- Three.js開發指南(5 6):使用Three.js的幾何體JS
- three.js 著色器材質之紋理JS
- Three.js開發指南隨書原始碼下載地址JS原始碼
- Three.js開發指南(7):粒子和粒子系統JS
- Three.js開發指南(1):介紹JS
- Three.js開發指南(2):使用構建Three.js場景的基本元件JS元件
- Three.js進階篇之9 - 紋理對映和UV對映JS
- Word的COM載入項開發指南
- Three.js開發指南(9):建立動畫和移動相機JS動畫
- Substance Painter技巧:使用Maya中Arnold渲染Substance紋理的指南AI
- Three.js中載入和渲染3D TilesJS3D
- WebGL程式設計指南(4)顏色與紋理Web程式設計
- [OpenGL]未來視覺6-靜態圖片紋理載入視覺
- 使用three.js載入.obj格式的3d檔案JSOBJ3D
- PyCharm入門級使用指南,Python開發必備!PyCharmPython
- Gif(2)-載入檢視-波紋
- win10 如何使用指紋登陸 win10怎麼設定指紋開機Win10
- SDL3 入門(5):紋理渲染
- blender紋理繪製克隆工具使用
- Go Web開發入坑指南GoWeb
- OpenGL/OpenGL ES入門: 紋理應用 - 紋理座標及案例解析(金字塔)
- pip安裝和使用入門指南
- Redis開發使用指南Redis
- Postgresql 使用Vscode開發指南SQLVSCode
- Three.js開發指南(12):用Physijs在場景中新增物理效果JS
- Shader從入門到跑路:自定義紋理輸入
- Flutter 開發從 0 到 1(四)ListView 下拉載入和載入更多FlutterView
- Webgl 紋理Web
- Harmony OS 開發避坑指南——原始碼下載和編譯原始碼編譯
- Unity iOS 使用 ASTC 格式紋理實踐UnityiOSAST
- Babel 外掛開發入門指南Babel
- Babel外掛開發入門指南Babel
- 圖形學之紋理後續/WebGL多紋理處理Web
- WebGL three.js學習筆記 6種型別的紋理介紹及應用WebJS筆記型別