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

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

Three.js scale(大きさ)

今回は、Three.jsの「scale(大きさ)」について書きます。

scaleを使うと、物体(球,立方体など)の大きさを変更できます。

scaleを使わず、このようなソースコードで実行した場合は、

 //「立方体」の生成
 var cube = new THREE.Mesh(
     //立方体の大きさ(300,300,300)                                           
     new THREE.CubeGeometry(300,300,300),                          
     new THREE.MeshPhongMaterial({                                      
               color: 0x990000 //球の色
      }));
        
 //sceneにcubeを追加
      scene.add(cube);       

//「地面」の生成  
var plane =  new THREE.Mesh(                                       
    new THREE.CircleGeometry(1000, 100),                 
    new THREE.MeshLambertMaterial({                         
        side: THREE.DoubleSide,                             
        color: 0x990000                                                                
                }));                      
        plane.position.set(0,0,1);                      
  
     scene.add(plane);   
                            
//XYZ軸の表示(長さ)
var axis = new THREE.AxisHelper(1000);             
    scene.add(axis);                             
    axis.position.set(0,0,1);                   
                                          

f:id:gupuru:20131130192154p:plain
こうなります。(立方体には、分かりやすくするためにテクスチャを使用しています。)

で、scaleを使うと、
f:id:gupuru:20131130192158p:plain
こうなります。

立方体が大きくなりました。
このように、scaleを使うと、簡単に物体のサイズが変更できます。

scaleの書き方は、

オブジェクト名.scale.set(x軸方向の大きさ,y軸方向の大きさ,z軸方向の大きさ);
オブジェクト名.scale.x = x軸方向の大きさ;
オブジェクト名.scale.y = y軸方向の大きさ;
オブジェクト名.scale.z = z軸方向の大きさ;

この2通りあります。
実際のソースコードは、こんな感じです。

 //「立方体」の生成
 var cube = new THREE.Mesh(
     //立方体の大きさ(300,300,300)                                           
     new THREE.CubeGeometry(300,300,300),                          
     new THREE.MeshPhongMaterial({                                      
               color: 0x990000 //球の色
      }));
        
 //sceneにcubeを追加
      scene.add(cube);    

//scale約2倍の大きさに変更
  cube.scale.set(2,2,2);                                          

このコードは、立方体の大きさを2倍にしています。
他にも、こういう風に書きますと、

 //「立方体」の生成
 var cube = new THREE.Mesh(
     //立方体の大きさ(300,300,300)                                           
     new THREE.CubeGeometry(300,300,300),                          
     new THREE.MeshPhongMaterial({                                      
               color: 0x990000 //球の色
      }));
        
 //sceneにcubeを追加
      scene.add(cube);    

 cube.scale.x = 2;
 cube.scale.y = 0.2;                                       

f:id:gupuru:20131130193558p:plain
こんなのが出来ます!

scaleは、ちょっとした時に役に立ちます(多分(笑))


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

広告を非表示にする