加載和使用紋理需要了解以下幾個方面:在Three.js里加載紋理并應用到網(wǎng)格上;使用凹凸貼圖和法線貼圖為網(wǎng)格添加深度和細節(jié);使用光照貼圖創(chuàng)建假陰影;使用環(huán)境貼圖在材質(zhì)上添加反光細節(jié);使用光亮貼圖,讓網(wǎng)格的某些部分變得“閃亮”;通過修改網(wǎng)格的UV貼圖,對貼圖進行微調(diào);將HTML5畫布和視頻元素作為紋理輸入。本章節(jié)將會從以上幾方面來了解紋理的使用。
1.使用凹凸貼圖創(chuàng)建皺紋
之前我們學習了THREE.MeshPhongMaterial對象的map屬性,知道它用來設置外部資源作為材質(zhì)的紋理。這里再介紹它的bumpMap屬性,用來實現(xiàn)凹凸貼圖效果。代碼和創(chuàng)建不同紋理一樣,僅僅多個bumpMap屬性的設置。代碼如下:
function createMesh(geom, imageFile, bump){ var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile); var material = new THREE.MeshPhongMaterial({ map: texture }); if(bump){ var bumpTex = THREE.ImageUtils.loadTexture("../assets/textures/general/" + bump); material.bumpMap = bumpTex; } var mesh = new THREE.Mesh(geom, material); &