Textures(紋理)
用於物體表面的紋理,或用於反射貼圖(reflection map)與折射貼圖(refraction map)。
3D世界中紋理的紋理由圖片所組成,也能說是貼圖,將貼圖以一定的規則映射至幾何體上,賦予幾何體紋理,一般是三角形。
建構函式如下:
THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )
各參數的意思是:
- Image:這是一個圖片類型,可以使用ImageUtils來加載,如下代碼
,或是使用canvas:var texture = THREE.ImageUtils.loadTexture(url);
var texture = new THREE.Texture( canvas);
Mapping:是一個
THREE.UVMapping()
類型,它表示的是紋理坐標。下一節,我們將說說紋理坐標。wrapS:表示x軸的紋理的包覆方式,亦即當紋理的寬度小於需要貼圖的平面的寬度的時候,平面剩下的部分應該以何種方式進行貼圖。
wrapT:表示y軸的紋理包覆方式。
magFilter和minFilter表示過濾的方式,這是OpenGL的基本概念。
format:表示加載的圖片的格式,這個參數可以取值THREE.RGBAFormat,RGBFormat等。THREE.RGBAFormat表示每個像素點要使用四個分量表示,分別是紅、綠、藍、透明來表示。RGBFormat則不使用透明,也就是說紋理不會有透明的效果。
type: The default is
THREE.UnsignedByteType
. Other valid types (as WebGL allows) are THREE.ByteType,THREE.ShortType
,THREE.UnsignedShortType
,THREE.IntType
,THREE.UnsignedIntType
,THREE.FloatType
,THREE.UnsignedShort4444Type
,THREE.UnsignedShort5551Type
, andTHREE.UnsignedShort565Type
.- anisotropy:各向異性過濾。使用各向異性過濾能夠使紋理的效果更好,但是會消耗更多的內存、CPU、GPU時間。
紋理坐標
參考資料:
http://threejs.org/docs/index.html#Reference/Textures/Texture http://www.hewebgl.com/article/getarticle/68