Textures(紋理)

用於物體表面的紋理,或用於反射貼圖(reflection map)與折射貼圖(refraction map)。

3D世界中紋理的紋理由圖片所組成,也能說是貼圖,將貼圖以一定的規則映射至幾何體上,賦予幾何體紋理,一般是三角形。

建構函式如下:

THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )

各參數的意思是:

  1. Image:這是一個圖片類型,可以使用ImageUtils來加載,如下代碼
     var texture = THREE.ImageUtils.loadTexture(url);
    
    ,或是使用canvas:
     var texture = new THREE.Texture( canvas);
    
  2. Mapping:是一個THREE.UVMapping()類型,它表示的是紋理坐標。下一節,我們將說說紋理坐標。

  3. wrapS:表示x軸的紋理的包覆方式,亦即當紋理的寬度小於需要貼圖的平面的寬度的時候,平面剩下的部分應該以何種方式進行貼圖。

  4. wrapT:表示y軸的紋理包覆方式。

  5. magFilter和minFilter表示過濾的方式,這是OpenGL的基本概念。

  6. format:表示加載的圖片的格式,這個參數可以取值THREE.RGBAFormat,RGBFormat等。THREE.RGBAFormat表示每個像素點要使用四個分量表示,分別是紅、綠、藍、透明來表示。RGBFormat則不使用透明,也就是說紋理不會有透明的效果。

  7. 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, and THREE.UnsignedShort565Type.

  8. anisotropy:各向異性過濾。使用各向異性過濾能夠使紋理的效果更好,但是會消耗更多的內存、CPU、GPU時間。

紋理坐標

參考資料:

http://threejs.org/docs/index.html#Reference/Textures/Texture http://www.hewebgl.com/article/getarticle/68

results matching ""

    No results matching ""