Three.js貼圖效果一覽

紋理貼圖(Textures)字面意思就是給幾何體物件貼上不同的紋理圖!好比於我們每天選擇穿不同的衣服,我們穿不同的衣服帶來的感官會有很大變化!同理幾何體不同貼圖的視覺效果也會有千差萬別。紋理貼圖是 Three。js一個很重要的內容,掌握了紋理貼圖可以讓3d效果產生質的飛躍。

那現在就讓我們進入正題吧!go!go!go!

貼圖的重要性

如果沒有紋理貼圖,我們看到的3d物體將會是很糟糕的!例如下面這個最基礎貼圖例子。

Three.js貼圖效果一覽

//建立一個球體幾何物件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

網格基礎材質,不受帶有方向光源影響,沒有稜角感。使用示例如下:

Three.js貼圖效果一覽

//材質物件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

網格法向量材質,是一種比較特殊的材質。它使得物體的每一個面的顏色都從該面向外指的法向量計算得到的。

Three.js貼圖效果一覽

//材質物件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

不對燈光作出反應。

Three.js貼圖效果一覽

const texture=textureLoader。load(‘/three/5B4CBC_B59AF2_9B84EB_8F78E4。png’);//材質物件Materialconst material = new THREE。MeshMatcapMaterial({});material。matcap= texture;

材質特別屬性簡介:

matcap貼圖屬性

MeshDepthMaterial

使用這種材質的物體,其外觀不是由光照或某個材質屬性決定的;而是由物體到相機的距離決定的。

「當物體離相機較近時會呈現白色,較遠時會呈現黑色。貼圖和顏色對其無效果」

,可以將這種材質與其他材質相結合,從而很容易建立逐漸消失的效果。

Three.js貼圖效果一覽

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

一樣可以實現光源和網格表面的漫反射光照計算,還可以產生高光效果(鏡面反射)。

Three.js貼圖效果一覽

//點光源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

貼圖效果。

Three.js貼圖效果一覽

//材質物件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

Three.js貼圖效果一覽

地址:https://www。textures。com/library

簡介:這個網站貼圖類別是我看過最齊全的啦!強大的搜尋功能允許你搜索特定的紋理以及標籤。不過國內載入有時會有點慢,不知道是不是我網路問題。不過還是極力推薦的!

polyhaven

Three.js貼圖效果一覽

地址:https://polyhaven。com/textures

簡介:這是一個完全免費的3D素材網站。裡面的貼圖質量非常的高,貼圖素材也很豐富!

MatCaps

Three.js貼圖效果一覽

地址:https://github。com/nidorx/matcaps

簡介:是專為

MeshMatcapMaterial

材質準備的,太讚了!

plaintextures

Three.js貼圖效果一覽

地址:https://www。。com/pbr/category/all/1

簡介:網站能提供免費紋理、畫筆和照片 高階賬號可以下載更高解析度的素材。

Texture Niaja

Three.js貼圖效果一覽

地址:https://texture。ninja/category/Wood/2

簡介:網站能提供5106種貼圖,如果你需要指紋貼圖的話,這會是很好的選擇!

圖片切割

Three.js貼圖效果一覽

Three.js貼圖效果一覽

地址:https://matheowis。github。io/HDRI-to-CubeMap/

簡介:上傳圖片檔案可以切割成6等分,環境貼圖可以用到哈!

紋理生成器1

Three.js貼圖效果一覽

地址:http://www。tartanmaker。com/

紋理生成器2

Three.js貼圖效果一覽

地址:https://coolbackgrounds。io/

紋理生成器3

Three.js貼圖效果一覽

地址:http://www。stripegenerator。com/

結論

本篇文章只是粗淺介紹了紋理貼圖和常用網路材質的使用方法,並順便引入了相機和光源。最後展示的貼圖效果還是很不錯的。如果你需要深入學習的話還是需要翻閱大量有關資料的。

參考資料

three。js journey

Three。js零基礎入門教程(郭隆邦)

頂部