Three.js 　テクスチャの貼り方

Three.jsの物体へのテクスチャの貼り方を書いていきます。

テクスチャを貼り付けた、実行例がこちらです。
f:id:gupuru:20131126195633p:plain

上のやつには、これらのテクスチャを使いました。

①
f:id:gupuru:20131126195512j:plain

②
f:id:gupuru:20131126195506p:plain

ペイントで、さくっと作りました（笑）
①のテクスチャはキューブ（立方体）に貼り、②のテクスチャは円に貼り付けました。
xyz軸は、THREE.AxisHelperのものです。軸にはテクスチャは貼っていません（笑）

では、テクスチャの貼り方を解説していきます！
テクスチャの読み込み方はこちらです。

  THREE.ImageUtils.loadTexture('ファイル名');

有名な拡張子（png,jpg)は、ほとんど使えるようです。
THREE.ImageUtils.loadTextureだけでは、読み込んだだけです。
物体にテクスチャを貼り付けるには、マテリアルのプロパティの一つ「map」を使います。
こんな感じです。

 var material = new THREE.MeshPhongMaterial({
        map: THREE.ImageUtils.loadTexture('test.jpg') });

これで、物体にテクスチャが貼りつけられます！

では、実際のソースコードです。

・ソースコード①

//テクスチャの読み込み
 var texture1  = new THREE.ImageUtils.loadTexture('test.jpg');
      
//キューブのジオメトリ（物体）の生成
 var cube = new THREE.Mesh(                      
            //キューブの大きさ                      
            new THREE.CubeGeometry(300,300,300),              
           //キューブにテクスチャを貼りつける       
            new THREE.MeshPhongMaterial({                                      
                 map: texture1                           
            }));     
  
//cubeをsceneに追加  
 scene.add(cube);

・ソースコード②

//キューブのジオメトリ（物体）の生成
 var cube = new THREE.Mesh(                      
            //キューブの大きさ                     
            new THREE.CubeGeometry(300,300,300),                 
            //キューブにテクスチャを貼りつける                
            new THREE.MeshPhongMaterial({                                      
                map: THREE.ImageUtils.loadTexture('test.jpg') 
             }));       

 //cubeをsceneに追加
 scene.add(cube);

ソースコード①のようにすると、１つのテクスチャを使い回すことが出来ます。
こんな感じに。

//テクスチャの読み込み
 var texture1  = new THREE.ImageUtils.loadTexture('test.jpg');
      
//キューブのジオメトリ（物体）の生成
 var cube = new THREE.Mesh(                                       
            new THREE.CubeGeometry(300,300,300),                   
            new THREE.MeshPhongMaterial({                                      
                 map: texture1                           
            }));     

 scene.add(cube);

 //円のジオメトリ（物体）の生成    
 var plane =  new THREE.Mesh(                                      
              new THREE.CircleGeometry(1000, 100),          
              new THREE.MeshLambertMaterial({                               
                map: texture1                                                                    
                }));                      
    
     scene.add(plane);