紋理貼圖(Textures)字面意思就是給幾何體物件貼上不同的紋理圖!好比於我們每天選擇穿不同的衣服,我們穿不同的衣服帶來的感官會有很大變化!同理幾何體不同貼圖的視覺效果也會有千差萬別。紋理貼圖是 Three。js一個很重要的內容,掌握了紋理貼圖可以讓3d效果產生質的飛躍。
那現在就讓我們進入正題吧!go!go!go!
貼圖的重要性
如果沒有紋理貼圖,我們看到的3d物體將會是很糟糕的!例如下面這個最基礎貼圖例子。
//建立一個球體幾何物件const circlegeometry = new THREE。SphereBufferGeometry(0。5, 16, 16)//建立一個立方體幾何物件Geometryconst geometry = new THREE。BoxGeometry(1, 1, 1);//建立一個圓環幾何物件const tourGeometry = new THREE。TorusBufferGeometry(0。3, 0。15, 16, 32);
// 載入貼圖let textureLoader = new THREE。TextureLoader();const texture=textureLoader。load(‘/three/grass。png’);//材質物件Materialconst material = new THREE。MeshBasicMaterial({ // color: 0xb9d3ff});material。map= texture;
不同材質物件的貼圖效果
不同的人穿同樣的衣服顯然是不合適的,好比一個
140kg
的胖子穿
s碼
的T恤,那肯定是穿不下的!紋理貼圖也是一樣的道理,它並不是適合每種
「材質物件(Material)」
。材質物件按大類分可分為五種。如下
點材質
線材質
網格材質
精靈Sprite材質
自定義著色器材質
「網路(Mesh)材質」
顧名思義,網格類模型才會使用的材質物件。那現在就來看看它帶來的貼圖效果吧。
MeshBasicMaterial
網格基礎材質,不受帶有方向光源影響,沒有稜角感。使用示例如下:
//材質物件MeshBasicMaterialconst material = new THREE。MeshBasicMaterial({ color: 0x00ff00 transparent:true, opacity:。5});material。map= texture;material。wireframe=true;
材質常用屬性簡介:
color材質顏色,比如藍色0x0000ff;
wireframe將幾何圖形渲染為線框。預設值為false;
opacity透明度設定,0表示完全透明,1表示完全不透明;
transparent是否開啟透明,預設false
MeshNormalMaterial
網格法向量材質,是一種比較特殊的材質。它使得物體的每一個面的顏色都從該面向外指的法向量計算得到的。
//材質物件MeshNormalMaterialconst material = new THREE。MeshNormalMaterial({ // color: 0x00ff00, // transparent:true, // opacity:。5});// material。map= texture;// material。wireframe=true;material。flatShading=true
材質常用屬性簡介:
flatShading可以讓每個小平面更加的平坦突出
MeshMatcapMaterial
由一個材質捕捉(MatCap,或光照球(Lit Sphere))紋理所定義,其編碼了材質的顏色與明暗。由於mapcap影象檔案編碼了烘焙過的光照,因此
MeshMatcapMaterial
不對燈光作出反應。
const texture=textureLoader。load(‘/three/5B4CBC_B59AF2_9B84EB_8F78E4。png’);//材質物件Materialconst material = new THREE。MeshMatcapMaterial({});material。matcap= texture;
材質特別屬性簡介:
matcap貼圖屬性
MeshDepthMaterial
使用這種材質的物體,其外觀不是由光照或某個材質屬性決定的;而是由物體到相機的距離決定的。
「當物體離相機較近時會呈現白色,較遠時會呈現黑色。貼圖和顏色對其無效果」
,可以將這種材質與其他材質相結合,從而很容易建立逐漸消失的效果。
const material = new THREE。MeshDepthMaterial({ // color: 0x00ff00, // transparent:true, // opacity:。5});
const width = container。clientWidth; //視窗寬度const height = container。clientHeight; //視窗高度const k = width / height; //視窗寬高比const s = 1。2; //三維場景顯示範圍控制係數,係數越大,顯示的範圍越大//建立相機物件const camera = new THREE。OrthographicCamera(-s * k, s * k, s, -s, 1, 100);camera。position。set(2, 3, 4); //設定相機位置// camera。position。set(20, 30, 40); //設定相機位置camera。lookAt(scene。position); //設定相機方向(指向的場景物件)
MeshLambertMaterial 和 MeshPhongMaterial
MeshLambertMaterial
這是一種暗淡的非光澤表面的材質,沒有鏡面高光,並且會對光源做出反應。高光網格材質
MeshPhongMaterial
除了和
MeshLambertMaterial
一樣可以實現光源和網格表面的漫反射光照計算,還可以產生高光效果(鏡面反射)。
//點光源const point = new THREE。PointLight(0xffffff,。5);point。position。set(4, 4, 4); //點光源位置scene。add(point); //點光源新增到場景中// //環境光const ambient = new THREE。AmbientLight(0xffffff,。5);scene。add(ambient);
// MeshLambertMaterial const material = new THREE。MeshLambertMaterial({ color: 0xff0000, });// MeshPhongMaterialconst material = new THREE。MeshPhongMaterial({ color: 0xff0000, specular:0xffffff,//高光部分的顏色 shininess:60,//高光部分的亮度,預設30});
MeshLambertMaterial特別屬性簡介:
specular高光部分的顏色;
shininess高光部分的亮度,預設30
MeshStandardMaterial
MeshStandardMaterial
和
MeshPhysicalMaterial
類是PBR物理材質,可以更好的模擬光照計算,相比光網格材質
MeshPhongMaterial
渲染效果更逼真。我們今天只看
MeshStandardMaterial
貼圖效果。
//材質物件Materialconst material = new THREE。MeshStandardMaterial();material。metalness=0。45; // 金屬度屬性material。roughness=0。65; //粗糙度屬性material。map= texture;
// 環境貼圖const envTextTure=cubeTextureLoader。load([ ‘/three/texture/px。png’, ‘/three/texture/nx。png’, ‘/three/texture/py。png’, ‘/three/texture/ny。png’, ‘/three/texture/pz。png’, ‘/three/texture/nz。png’])//材質物件Materialconst material = new THREE。MeshStandardMaterial();material。metalness=0。7; // 金屬度屬性material。roughness=0。2; //粗糙度屬性material。envMap=envTextTure;
材質特別屬性簡介:
metalness金屬度屬性(0。0到1。0之間的值可用於生鏽的金屬外觀);
roughness粗糙度屬性(0。0表示平滑的鏡面反射,1。0表示完全漫反射。 預設 0。5)
網站推薦
這些網站主要是關於
「貼圖推薦」
和
「紋理貼圖工具」
。好的
「貼圖」
可以讓我們的物體更加的惟妙惟肖。所以推薦一下,希望對大家有幫助!
textures
地址:https://www。textures。com/library
簡介:這個網站貼圖類別是我看過最齊全的啦!強大的搜尋功能允許你搜索特定的紋理以及標籤。不過國內載入有時會有點慢,不知道是不是我網路問題。不過還是極力推薦的!
polyhaven
地址:https://polyhaven。com/textures
簡介:這是一個完全免費的3D素材網站。裡面的貼圖質量非常的高,貼圖素材也很豐富!
MatCaps
地址:https://github。com/nidorx/matcaps
簡介:是專為
MeshMatcapMaterial
材質準備的,太讚了!
plaintextures
地址:https://www。。com/pbr/category/all/1
簡介:網站能提供免費紋理、畫筆和照片 高階賬號可以下載更高解析度的素材。
Texture Niaja
地址:https://texture。ninja/category/Wood/2
簡介:網站能提供5106種貼圖,如果你需要指紋貼圖的話,這會是很好的選擇!
圖片切割
地址:https://matheowis。github。io/HDRI-to-CubeMap/
簡介:上傳圖片檔案可以切割成6等分,環境貼圖可以用到哈!
紋理生成器1
地址:http://www。tartanmaker。com/
紋理生成器2
地址:https://coolbackgrounds。io/
紋理生成器3
地址:http://www。stripegenerator。com/
結論
本篇文章只是粗淺介紹了紋理貼圖和常用網路材質的使用方法,並順便引入了相機和光源。最後展示的貼圖效果還是很不錯的。如果你需要深入學習的話還是需要翻閱大量有關資料的。
參考資料
three。js journey
Three。js零基礎入門教程(郭隆邦)