關(guān)于材質(zhì)，threejs的官方文檔（https:///docs/index.html?q=material）講解比...

介紹完材質(zhì)后，我們來簡單看看紋理貼圖。如果我們想在材質(zhì)上實(shí)現(xiàn)更加逼真的效果的話我們就要用到紋理貼圖了，例如墻磚，地板等。

加載紋理圖片我們使用TextureLoader

var texture = new THREE.TextureLoader().load("images/f2.jpg");

紋理可以設(shè)置水平和豎直方向的重復(fù)

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

可以設(shè)置重復(fù)的次數(shù)

texture.repeat.set(20, 20);

效果圖如下

下面介紹幾個特別的場景

1.要在立方體的不同面上貼上不同的圖片

這個時候我們需要使用MultiMaterial來當(dāng)作材質(zhì)，指定不同面的紋理，每個面都是一個Material

var materials = [ 
 new THREE.MeshBasicMaterial( { map:new THREE.TextureLoader().load("images/right.jpg") } ), // right
 new THREE.MeshBasicMaterial( { map:new THREE.TextureLoader().load("images/left.jpg") } ), // left
 new THREE.MeshBasicMaterial( { map:new THREE.TextureLoader().load("images/top.jpg") } ), // top
 new THREE.MeshBasicMaterial( { map:new THREE.TextureLoader().load("images/bottom.jpg") } ), // bottom 
 new THREE.MeshBasicMaterial( { map:new THREE.TextureLoader().load("images/front.jpg") } ) // front 
 new THREE.MeshBasicMaterial( { map:new THREE.TextureLoader().load("images/back.jpg") } ), // back
]; 
var cubeSidesMaterial = new THREE.MultiMaterial( materials );

2.很多時候我們想動態(tài)生成圖片或文字，當(dāng)作材質(zhì)紋理

這里可以使用canvas作為紋理貼圖，Three為我們提供里CanvasTexture

function getTextCanvas(text){ 
 var width=512, height=256; 
 var canvas = document.createElement('canvas');
 canvas.width = width;
 canvas.height = height;
 var ctx = canvas.getContext('2d');
 ctx.fillStyle = '#C3C3C3';
 ctx.fillRect(0, 0, width, height);
 ctx.font = 50+'px " bold';
 ctx.fillStyle = '#2891FF';
 ctx.textAlign = 'center';
 ctx.textBaseline = 'middle';
 ctx.fillText(text, width/2,height/2); 
 return canvas;
 }
var materials = [ 
 new THREE.MeshBasicMaterial( { color: 'blue' } ), // right
 new THREE.MeshBasicMaterial( { color: 'yellow' } ), // left
 new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(getTextCanvas('Leo Test Label')) } ), // top
 new THREE.MeshBasicMaterial( { color: 'black' } ), // bottom
 new THREE.MeshBasicMaterial( { color: 'green' } ), // back
 new THREE.MeshBasicMaterial( { color: 'red' } ) // front 
 ];

這樣我們就可以利用canvas畫上文字或者圖形，用來填充紋理貼圖。

在線demo