Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

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);

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

//テクスチャの読み込み
 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);                                                                          

実行画面はこちら。
f:id:gupuru:20131126202652p:plain

ソースコード②の場合は、読み込みの際に、新しい変数を作る必要はありません。


まとめますと、
「new THREE.ImageUtils.loadTexture('ファイル名')」でテクスチャを読み込み、mapで貼り付けという流れで、テクスチャを貼り付けられます。

簡単に貼り付けられます(笑)

ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!

広告を非表示にする