Three.jsの基本⑥

今回は、Three.jsのGeometry（ジオメトリ ）をやります。
Geometryは、球や立方体などの実際に表示する物体の事です。形状と言ったほうがいいのかな（笑）
ざっくりというと、今回は、物体の生成から位置や色の設定を中心にやっていきます（笑）

「introduction.html」では、この部分が物体を表示している所です。

/*------------Geometry処理(物体表示)⑤-------------*/ 
  var sphere,plane,axis;  //グローバル変数                                                   
  function initObject(){
  
      //球体を表示する部分
        sphere = new THREE.Mesh(                                         
                  //球のジオメトリ　（半径：２００）   
                  new THREE.SphereGeometry(200),      
                 //マテリアル （材質） 
                  new THREE.MeshPhongMaterial({          
                       //色（１６進数）                             
                       color: 0xffffff                                  
                       }));
      //影の設定
　　 sphere.castShadow = true;　
      //影の設定　　　　　　　　
      sphere.receiveShadow = true;         
     //sceneに追加               
      scene.add(sphere);                           
      // 位置設定                                                
      sphere.position.set(0,0,500);                    
   
    //地面（円）を表示する部分  
     plane =  new THREE.Mesh(       
             //  円のジオメトリ（半径1000、正100角形）                                    
              new THREE.CircleGeometry(1000, 100),    
             //マテリアル （材質）          
              new THREE.MeshLambertMaterial({             
               //両面表示する              
                side: THREE.DoubleSide,             
               //色（１６進数）              
                color: 0x000000,                                                                 
                }));        
    //影の設定
     plane.receiveShadow = true;                    
    // 位置設定 
     plane.position.set(0,0,1);             
     //sceneに追加                  
     scene.add(plane);                                    
     
     //軸の表示（長さ：1000）   
     axis = new THREE.AxisHelper(1000);          
    //sceneに追加 
     scene.add(axis);     
    // 位置設定                             
     axis.position.set(0,0,1);                     
    
  }
   /*-------Geometry処理(物体表示)⑤-----ここまで-------*/

さて、Three.jsでは、表示する物体は主に以下の3つの要素で構成されています。

• ①形状 (Geometry)

• ②質感 (Material)

• ③実際に表示する物体 (Object3D)

プログラムでは、

var sphere = new THREE.Mesh(  //③実際に表示する物体 (Object3D)                                          
               new THREE.SphereGeometry(200),   // ①形状 (Geometry) 
               new THREE.MeshPhongMaterial({  //②質感 (Material)                              
                       color: 0xffffff                                  
                       }));

こんな感じです。

話は、脱線しますが、他にも書き方はあります！

var geometry = new THREE.SphereGeometry(200);  // ①形状 (Geometry) 
var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );//②質感 (Material) 
var sphere = new THREE.Mesh( geometry, material );//③実際に表示する物体 (Object3D) 
scene.add( sphere );

こういうやり方もあります。（こちらは、変数が増えて、あまり好きではないんですよね（笑））

では、 ①形状 (Geometry)から見ていきます。

Three.jsの形状は、

• 「テキスト」
• 「平面（PlaneGeometry）」
• 「円 (CircleGeometry）」
• 「直方体(CubeGeometry）」
• 「球 (SphereGeometry)」
• 「円柱 (CylinderGeometry)」
• 「トーラス(TorusGeometry)」
• 「トーラス結び目 (TorusKnotGeometry )」
• 「回転体 (LatheGeometry)」
• 「凸包 (ConvexGeometry)」
• 「正4面体 (TetrahedronGeometry)」
• 「正8面体 (OctahedronGeometry)」
• 「正20面体 (IcosahedronGeometry)」
• 「多面体 (PolyhedronGeometry)」
• 「管 (TubeGeometry)」
• 「パラメトリック曲面 (ParametricGeometry)」

など様々な形状の物体が用意されています。もちろん自分でオリジナルの物を作る事も可能です。

全てやるのは、少し無理なので、今回は「球」を解説します。

・球 (SphereGeometry)
球を表示するジオメトリです。

球のコンストラクタ

THREE.SphereGeometry ( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

コンストラクタ引数

• radius [= 50] 半径。

• widthSegments [= 8]経度分割数。経線が細かくなる。

• heightSegments [= 6]緯度分割数。緯線が細かくなる。

• phiStart [= 0]開始経度。単位はラジアン。

• phiLength [= 2π]経線中心角。単位はラジアン。

• thetaStart [= 0]開始緯度。単位はラジアン。

• thetaLength [= π]緯線中心角。単位はラジアン。

コード例①:

        var sphere = new THREE.Mesh(                                         
                  new THREE.SphereGeometry(200),   
                  new THREE.MeshPhongMaterial({                            
                       color: 0xffffff                                  
                       }));

コード例②:

var geometry = new THREE.SphereGeometry(200);  
var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

実行例:

② 質感（マテリアル）を説明します。

マテリアルは、簡単にいうと「質感・材質」のことです。
マテリアルの種類も、MeshBasicMaterial,MeshLambertMaterial,MeshPhongMaterialの３種類あります。
質感は、MeshBasicMaterialが一番低く、MeshPhongMaterialが一番高いです。
影や光の反射などを綺麗に描画するのは、MeshPhongMaterialです。また、一般的にMeshPhongMaterialが多く使われるようです。

画像で見比べてみます。(球の材質だけを変えています)
・MeshBasicMaterial

・MeshLambertMaterial

・MeshPhongMaterial

写真でも分かるように、MeshBasicMaterialは、影や光の反射などが全く描画されていません。逆に、MeshPhongMaterialだと、綺麗に描画されています。MeshLambertMaterialは、両者の中間と言った所ですね〜

マテリアルのコードの書き方は、
MeshPhongMaterialの場合、

new THREE.MeshPhongMaterial

と書くだけです。
他も同じです。

new THREE.MeshBasicMaterial

で、マテリアルには、プロパティというものもあります。
このプロパティで、色などの設定を行います。
プロパティも種類がたくさんあります。color以外をいくつかをあげます。

• side [= THREE.FrontSide]　表示する面
• visible [= true]　表示するかしないか。false指定で見えなくなる。
• opacity [= 1]不透明度。

コレ以外にも、いっぱあります。
もっと知りたい人は、こちらで分かりやすく解説してくれています。
多彩な表現力のWebGLを扱いやすくする「Three.js」（3/5）- ＠IT

プロパティの書き方は、

var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );

このように、colorのところがプロパティを書く所です。

マテリアルは大変です（笑）

あと、最後におまけにAxisHelperを紹介します。
AxisHelperは、xyz軸を表示するものです。
こんな感じの軸が出ます。

制作する時に、スゴく便利です。

書き方は、

     //軸の表示（長さ：1000）   
   var  axis = new THREE.AxisHelper(1000);          
    //sceneに追加 
     scene.add(axis);     
    // 位置設定                             
     axis.position.set(0,0,1);        

こんな感じに簡単に追加できます！

さて、今回は、これくらいにしましょうか〜
お疲れ様でした〜
次回は、 renderer.clear(); （ループ処理）をやります！　

---

前回　　　　　　　　　次回