Exercise 1

演習１立体の形状

立体を作ってみよう

文法上の詳しい説明は
VRMLの文法の
◆VRMLの構造(文法)
◆Shape(形状の定義)
◆Shapeの例
◆Transform(座標変換)
を参照してください。

青い円錐を作ろう

　まず、底面の半径が0.5、高さが1.5、外観(appearance)の色合い(material)がデフォルト値(白でレンダリング)の円錐を作ります。Shapeノードの中にappearanceフィールドとgeometryフィールドがあります。フィールドにはフィールド値またはノードを記述します。


#VRML V2.0 utf8
#円錐   filename=ex01_cone1.wrl

Shape {
   appearance Appearance {
       material Material{ }
   }
   geometry Cone {
           bottomRadius 0.5
           height 1.5  }
}

→

　先頭行の「#VRML V2.0 utf8」はヘッダでこの行が無いとVRMLブラウザで表示できません。次の「#」の行はコメントです。行の途中に「#」がある場合はそれ以降、行の終わりまでがコメントになります。円錐を作るのはConeノードです。上の例をエディタを使用して入力してみましょう。入力できたら名前を付けて(～.wrl)保存し、VRMLブラウザで表示してみましょう。
　最も簡単な円錐ができましたので、次に外観の色に青(diffuseColor 0 0 1 (RBGカラー値を0から1で与える))を指定して青い円錐を作りましょう。今度は底面の半径を0.45にしています。


#VRML V2.0 utf8
#青い円錐   filename=ex01_cone2.wrl

Shape {
   appearance Appearance {
       material Material{ diffuseColor 0 0 1 }
   }
   geometry Cone {
           bottomRadius 0.45
           height 1.5  }
}

→

黄色の球を作ろう

　半径が0.5の球を作ります。球を作るのはSphereノードです。


#VRML V2.0 utf8
#黄色の球   filename=ex01_sphere.wrl

Shape {
   appearance Appearance {
     material Material{ 
       diffuseColor 0.8 0.6 0.4 }
   }
   geometry Sphere{ radius 0.5 }
}

→

直方体を作ろう

　x方向(横)が0.1、y方向(高さ)が1.2、z方向(奥行)が1.2で、外観にはイメージファイル cd081.gif を貼り付けた直方体を作ります。直方体を作るノードはBoxです。cd081.gif ファイルが必要な場合は、素材集からダウンロードします。


#VRML V2.0 utf8
#直方体   filename=ex01_box.wrl

Shape {
   appearance Appearance {
       texture ImageTexture { url "cd081.gif" }
   }
   geometry Box {
           size  1.5 1.2 1.2 }
}

→

細目の円柱を作ろう

　半径が0.1、高さが0.6の細目の円柱を作ります。外観にはイメージファイル cd001.gif を貼り付けます。円柱を作るのはCylinderノードです。


#VRML V2.0 utf8
#細目の円柱   filename=ex01_cylinder1.wrl

Shape {
   appearance Appearance {
       texture ImageTexture { url "cd001.gif" }
   }
   geometry Cylinder {
           radius 0.1  height 0.6 }
}

→

やや細目の円柱を作ろう

　半径が0.12、高さが1.2のやや細目の円柱を作ります。外観にはイメージファイル cd138.gif を貼り付けます。


#VRML V2.0 utf8
#やや細目の円柱   filename=ex01_cylinder2.wrl

Shape {
   appearance Appearance {
       texture ImageTexture { url "cd138.gif" }
   }
   geometry Cylinder {
           radius 0.12  height 1.2 }
}

→

合わせた形を作ろう

　これまでに作成した立体は座標の原点に作られています。このままですと立体は全て重なってしまいますので、Transformノードで原点を移動したり、座標軸を回転して並べてみましょう。VRMLの座標については、VRMLの文法のVRMLの座標を参照してください。


#VRML V2.0 utf8
#合わせた形   filename=ex01_puppet.wrl

#cone
Transform {                  #円錐のローカル座標の原点を
  translation 0.4 2 0        #(0.4, 2, 0)に移動
  rotation 0 0 -1 0.375      #(0, 0, -1)ベクトルを軸に
  children [                 #0.375ラジアン回転
    Shape {
      appearance Appearance {
          material Material{ diffuseColor 0 0 1 }
      }
      geometry Cone {
              bottomRadius 0.45
              height 1.5  }
}]}

#sphere
Transform {                  #球のローカル座標の原点を
  translation 0 1 0          #(0, 1, 0)に移動
  children [ 
    Shape {
      appearance Appearance {
          material Material{ diffuseColor 0.8 0.6 0.4 }
      }
      geometry Sphere{ radius 0.5 }
}]}

#sphere
Transform {                  #球のローカル座標の原点を
  translation 0 1 0.45       #(0, 1, 0.45)に移動
  scale 0.15 0.15 1          #スケールを(0.15, 0.15, 1)にして
  children [                 #細長い楕円球に変形
    Shape {
      appearance Appearance {
          material Material{ diffuseColor 0.8 0.6 0.4 }
      }
      geometry Sphere{ radius 0.5 }
}]}

#box
Transform {                  #直方体のローカル座標の原点を
  translation 0 -0.1 0       #(0, -0.1, 0)に移動
  children [ 
    Shape {
      appearance Appearance {
        texture ImageTexture { url "cd081.gif" }
      }
      geometry Box {
              size  1.5 1.2 1.2 }
}]}

#cylinder1 left
Transform {                  #円柱のローカル座標の原点を
  translation -0.95 0 0      #(-0.95, 0, 0)に移動
  rotation 0 0 -1 0.75       #(0, 0, -1)ベクトルを軸に
  children [                 #0.75ラジアン回転
    Shape {
      appearance Appearance {
        texture ImageTexture { url "cd001.gif" }
     }
     geometry Cylinder {
             radius 0.1  height 0.6 }
}]}

#cylinder1 right
Transform {                  #円柱のローカル座標の原点を
  translation 0.95 0 0       #(0.95, 0, 0)に移動
  rotation 0 0 -1 -0.75      #(0, 0, -1)ベクトルを軸に
  children [                 #-0.75ラジアン回転
    Shape {
      appearance Appearance {
        texture ImageTexture { url "cd001.gif" }
     }
     geometry Cylinder {
             radius 0.1  height 0.6 }
}]}

#cylinder2 left
Transform {                  #円柱のローカル座標の原点を
  translation -0.5 -1.25 0   #(-0.5, -1.25, 0)に移動
  rotation 0 0 -1 0.375      #(0, 0, -1)ベクトルを軸に
  children [                 #0.375ラジアン回転
    Shape {
      appearance Appearance {
        texture ImageTexture { url "cd138.gif" }
     }
     geometry Cylinder {
             radius 0.12  height 1.2 }
}]}

#cylinder2 right
Transform {                  #円柱のローカル座標の原点を
  translation 0.5 -1.25 0    #(0.5, -1.25, 0)に移動
  rotation 0 0 -1 -0.375     #(0, 0, -1)ベクトルを軸に
  children [                 #-0.375ラジアン回転
    Shape {
      appearance Appearance {
        texture ImageTexture { url "cd138.gif" }
     }
     geometry Cylinder {
             radius 0.12  height 1.2 }
}]}

→

DEF と USE を使ってみよう

　前の例では全く同じShapeノードを繰り返し使用しています。このような場合はDEF文で新しいノード名を定義しておき、同じファイル内で、後にそのノードを使用するときにUSE文を使います。次の例は、前の例をDEF文とUSE文を使用して書き換えたもので、ブラウザで表示した結果は変わりません。


#VRML V2.0 utf8
#合わせた形(DEF,USE)   filename=ex01_puppet2.wrl

#cone
Transform {
  translation 0.4 2 0
  rotation 0 0 -1 0.375
  children [ 
    Shape { 
      appearance Appearance {
          material Material{ diffuseColor 0 0 1 }
      }
      geometry Cone {
              bottomRadius 0.45
              height 1.5  }
}]}

#sphere
Transform {
  translation 0 1 0
  children [ 
    DEF Face Shape {          #Shapeノードに新しい名前Faceを定義
      appearance Appearance {
          material Material{ diffuseColor 0.8 0.6 0.4 }
      }
      geometry Sphere{ radius 0.5 }
}]}

#sphere
Transform {
  translation 0 1 0.45
  scale 0.15 0.15 1
  children [ USE Face ]       #Faceを使用
}

#box
Transform {
  translation 0 -0.1 0
  children [ 
    Shape {
      appearance Appearance {
        texture ImageTexture { url "cd081.gif" }
      }
      geometry Box {
              size  1.5 1.2 1.2 }
}]}

#cylinder1 left
Transform {
  translation -0.95 0 0
  rotation 0 0 -1 0.75
  children [ 
    DEF Arm Shape {           #Shapeノードに新しい名前Armを定義
      appearance Appearance {
        texture ImageTexture { url "cd001.gif" }
     }
     geometry Cylinder {
             radius 0.1  height 0.6 }
}]}

#cylinder1 right
Transform {
  translation 0.95 0 0
  rotation 0 0 -1 -0.75
  children [ USE Arm ]        #Armを使用
}

#cylinder2 left
Transform {
  translation -0.5 -1.25 0
  rotation 0 0 -1 0.375
  children [ 
    DEF Leg Shape {          #Shapeノードに新しい名前Legを定義
      appearance Appearance {
        texture ImageTexture { url "cd138.gif" }
     }
     geometry Cylinder {
             radius 0.12  height 1.2 }
}]}

#cylinder2 right
Transform {
  translation 0.5 -1.25 0
  rotation 0 0 -1 -0.375
  children [ USE Leg ]        #Legを使用
}

形を分けてみよう

　円錐と球の部分、直方体と円柱の部分をそれぞれひとまとまりの立体として定義してみましょう。Transform { chldren [ Transform { chldren [･･･のように書きます。ここでは、円錐と球の部分と直方体と円柱の部分をそれぞれ別の方向に傾けています。


#VRML V2.0 utf8
#形を分ける   filename=ex01_puppet3.wrl

Transform {                                       #head --
  translation 0 0 0                                      #|
  rotation 0 1 0 -0.375                                  #|
  children [                                             #|
    Transform {                               #cone --   #|
      translation 0.4 2 0                            #|  #|
      rotation 0 0 -1 0.375                          #|  #|
      children [                                     #|  #|
        Shape {                                      #|  #|
          appearance Appearance {                    #|  #|
            material Material{ diffuseColor 0 0 1 }  #|  #|
          }                                          #|  #|
          geometry Cone {                            #|  #|
              bottomRadius 0.45                      #|  #|
              height 1.5  }                          #|  #|
    }]}                                            #--   #|
    Transform {                             #sphere --   #|
      translation 0 1 0                              #|  #|
      children [                                     #|  #|
        DEF Face Shape {                             #|  #|
          appearance Appearance {                    #|  #|
            material Material{                       #|  #|
              diffuseColor 0.8 0.6 0.4 }             #|  #|
          }                                          #|  #|
          geometry Sphere{ radius 0.5 }              #|  #|
    }]}                                            #--   #|
    Transform {                             #sphere --   #|
      translation 0 1 0.45                           #|  #|
      scale 0.15 0.15 1                              #|  #|
      children [ USE Face ]                          #|  #|
    }                                              #--   #|
]}                                                      #--

Transform {                                       #body --
  translation 0 0 0                                      #|
  rotation 0 0 -1 0.375                                  #|
  children [                                             #|
    Transform {                                #box --   #|
      translation 0 -0.1 0                           #|  #|
      children [                                     #|  #|
        Shape {                                      #|  #|
          appearance Appearance {                    #|  #|
            texture ImageTexture { url "cd081.gif" } #|  #|
          }                                          #|  #|
          geometry Box {                             #|  #|
                  size  1.5 1.2 1.2 }                #|  #|
    }]}                                            #--   #|
    Transform {                     #cylinder1 left --   #|
      translation -0.95 0 0                          #|  #|
      rotation 0 0 -1 0.75                           #|  #|
      children [                                     #|  #|
        DEF Arm Shape {                              #|  #|
          appearance Appearance {                    #|  #|
            texture ImageTexture { url "cd001.gif" } #|  #|
         }                                           #|  #|
         geometry Cylinder {                         #|  #|
             radius 0.1  height 0.6 }                #|  #|
    }]}                                            #--   #|
    Transform {                    #cylinder1 right --   #|
      translation 0.95 0 0                           #|  #|
      rotation 0 0 -1 -0.75                          #|  #|
      children [ USE Arm ]                           #|  #|
    }                                              #--   #|
    Transform {                     #cylinder2 left --   #|
      translation -0.5 -1.25 0                       #|  #|
      rotation 0 0 -1 0.375                          #|  #|
      children [                                     #|  #|
        DEF Leg Shape {                              #|  #|
          appearance Appearance {                    #|  #|
            texture ImageTexture { url "cd138.gif" } #|  #|
         }                                           #|  #|
         geometry Cylinder {                         #|  #|
             radius 0.12  height 1.2 }               #|  #|
    }]}                                            #--   #|
    Transform {                    #cylinder2 right --   #|
      translation 0.5 -1.25 0                        #|  #|
      rotation 0 0 -1 -0.375                         #|  #|
      children [ USE Leg ]                           #|  #|
    }                                              #--   #|
]}                                                     #--

→

Inlineを使ってみよう

　完成した立体のVRMLファイルをInlineノードで読み込んで使用することができます。ex01_puddet2.wrl を使用してみましょう。


#VRML V2.0 utf8
#合わせた形(Inline)   
#   filename=ex01_puppet4.wrl

Transform {
  rotation 1 0 1 -1.2        #回転
  children [ 
    Inline { url "ex01_puppet2.wrl"} ]
}

→

演習１ 立体の形状