three.js-texture

Three.js學習筆記 本篇介紹紋理的使用。

紋理

我們可以在材質中加載紋理，在Material的map屬性中。

    
    // 新建 Texture 加載器
    var loader = new THREE.TextureLoader();

	var texture = loader.load("img/text.png");

	var material = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					map: texture
				});

前面用到的THREE.ImageUtils.loadTexture 已經被摒棄。

var texture = new THREE.ImageUtils.loadTexture("img/text.png");
                
				var material = new THREE.MeshBasicMaterial({
					color: 0x4d6dad,
					map: texture
				});
				

紋理的加載時異步的，所以需要注意。支持PNG、GIF或JPEG輸入格式。
最好使用正方形圖片，保證長寬都是2的次方大小。

凹凸貼圖

凹凸貼圖是一張灰度圖，上面有像素的相對高度，可以用來增加材質的高度。

	var material = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					bumpMap: texture
				});

法向貼圖

法向貼圖保存了像素的法向向量，可以使材質具有更加細致的凹凸和皺紋。

	var material = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					normalMap: texture
				});

光照貼圖

光照貼圖是提前渲染好的陰影圖片。

	var material = new THREE.MeshBasicMaterial({
					color: 0xff0000,
					lightMap: texture
				});

other

羅列這些是極為麻煩的，所以
learn more from http://threejs.org/