この授業について質問がある場合は、hemmi@sun.ac.jp までメールで問い合わせてください。
その際、件名は 「コンピュータグラフィクス演習の講義について（１２）」 としてください。
【注意】ブラウザは Internet Explorer を使っているか確認してください。
プログラムが複雑になってくるとエラーが出る場合があります。
その際は「エラーメッセージについて」を参照してください。
前回の授業では、回転アニメーションと色変化アニメーションについて学びました。
実際にアニメーションを作っていると、これまでに学んだ知識だけでは対応できない場合が出てきます。
例えば、図形を回転しながら移動したい場合や2つの物体を連動して回転したい場合などです。
今回は、アニメーションの応用例として、１つの物体に２つの動きを与える（回転しながら移動する）方法と２つ以上の物体を連動して動かす方法について学びます。
これらの方法が理解できると、もっと複雑な動きをさせたい場合にも対応できるようになると思います。
【例１】三角錐が回転しながら左右に移動する
回転用と移動用にROUTE文を２セット作るところがポイント。
#VRML V2.0 utf8
DEF WHEELS Transform{
translation 0.0 1.0 0.0 #表示位置
center 0.0 -1.5 0.0 #回転中心
children[
Shape{
appearance Appearance{
material Material{
diffuseColor 0.0 1.0 0.0
}
}
geometry Cone{
bottomRadius 0.2
height 3.0
}
}
]
}
#回転用TimeSensorの定義
DEF TIMER TimeSensor{
cycleInterval 10.0 #１周期の時間を設定（秒）
loop TRUE #繰り返しの設定
}
#回転に関するアニメーションの定義
DEF OI OrientationInterpolator{ #回転するアニメーションの設定
key[
0.0 0.5 1.0 #動作を起こす時間ポイント
]
keyValue[ #値の変化を設定
0.0 0.0 1.0 0.0, #回転軸 X Y Z 回転角度
0.0 0.0 1.0 -3.14,
0.0 0.0 1.0 -6.28
]
}
#移動用TimeSensorの定義
DEF TIMER2 TimeSensor{ #TimeSensorノード
cycleInterval 10.0 #１周期の時間の設定（秒）
loop TRUE #繰り返しの設定
}
#移動に関するアニメーションの定義
DEF PI PositionInterpolator{ #移動するアニメーションの設定
key[
0.0 0.5 1.0 #動作を起こす時間ポイント
]
keyValue[ #値の変化を設定
5.0 0.0 0.0,
-5.0 0.0 0.0,
5.0 0.0 0.0
]
}
#回転用ROUTE文の定義
ROUTE TIMER.fraction_changed TO OI.set_fraction
ROUTE OI.value_changed TO WHEELS.set_rotation
#移動用ROUTE文の定義
ROUTE TIMER2.fraction_changed TO PI.set_fraction
ROUTE PI.value_changed TO WHEELS.set_translation
実行例
【例２】三角錐と球で物体を作り、２つの物体を連動して回転させる（2つの物体を一緒に回転させる）
２つの物体を１つのDEF文に入れるところがポイント。
#VRML V2.0 utf8
DEF WHEELS Transform{ # ２つの物体を「WHEELS」と定義
center 0.0 0.2 0.0 # 回転の中心を設定
translation -2.0 0.0 0.0 # 全体の表示位置を設定
children[
# １個目の図形の定義
Transform{
translation 0.0 1.0 0.0 # １個目の図形の表示位置を設定
children[
Shape{
appearance Appearance{
material Material{
diffuseColor 0.0 1.0 0.0
}
}
geometry Cone{
bottomRadius 0.2
height 3.0
}
}
]
}
# ２個目の図形の定義
Transform{
translation 0.0 2.3 0.0 # ２個目の図形の表示位置を設定
children[
Shape{
appearance Appearance{
material Material{
diffuseColor 1.0 0.0 0.0
}
}
geometry Sphere{
radius 0.3
}
}
]
}
]
}
#TimeSensorの定義
DEF TIMER TimeSensor{ # TimeSensorノード
cycleInterval 10.0 # １周期の時間を設定
loop TRUE # 繰り返しの設定
}
#回転に関するアニメーションの定義
DEF OI OrientationInterpolator{ # 回転するアニメーションの設定
key[
0.0 0.5 1.0 # 動作を起こす時間ポイント
]
keyValue[ # 値の変化を設定
0.0 0.0 1.0 0.0, # 回転軸 X Y Z 回転角度
0.0 0.0 1.0 3.14,
0.0 0.0 1.0 6.28
]
}
#ROUTE文の定義
ROUTE TIMER.fraction_changed TO OI.set_fraction
ROUTE OI.value_changed TO WHEELS.set_rotation
実行例
【例３】同じ物体を組み合わせてCGを作る場合は DEF / USE を使うと簡単になる
#VRML V2.0 utf8
DEF WHEELS Transform{ # 全ての物体を「WHEELS」と定義
center 0.0 0.5 0.0 # 回転の中心を設定
translation 4.0 0.0 0.0 # 全体の表示位置を設定
children[
# １個目の図形の定義
Transform{
translation 2.0 0.0 0.0 # １個目の図形の表示位置を設定
rotation 0.0 0.0 1.0 3.14 # １個目の図形を回転させて表示
children[
DEF HARI Shape{ # 円錐形を「HARI」と定義
appearance Appearance{
material Material{
diffuseColor 0.0 1.0 0.0
}
}
geometry Cone{
bottomRadius 0.2
height 3.0
}
}
]
}
# ２個目の図形の定義
Transform{
translation -2.0 0.0 0.0 # ２個目の図形の表示位置を移動させる
rotation 0.0 0.0 1.0 1.57 # ２個目の図形を回転させて表示
children[ USE HARI ] # HARI（円錐形）を呼び出す
}
]
}
#TimeSensorの定義
DEF TIMER TimeSensor{ # TimeSensorノード
cycleInterval 10.0 # １周期の時間を設定
loop TRUE # 繰り返しの設定
}
#回転に関するアニメーションの定義
DEF OI OrientationInterpolator{ # 回転するアニメーションの設定
key[
0.0 0.5 1.0 # 動作を起こす時間ポイント
]
keyValue[ # 値の変化を設定
0.0 0.0 1.0 0.0, # 回転軸 X Y Z 回転角度
0.0 0.0 1.0 3.14,
0.0 0.0 1.0 6.28
]
}
#ROUTE文の定義
ROUTE TIMER.fraction_changed TO OI.set_fraction
ROUTE OI.value_changed TO WHEELS.set_rotation
実行例
【練習問題】
（１） 例１を逆回転させなさい
（３） （２）を逆回転させなさい
１２：１０までに、ここまでの課題が終わったかどうかを返信してください。
返信は、LiveCampusの「授業連絡」から行ってください。
返信内容は、「終わった」または「終わらなかった」のいずれかとしてください。
2020年6月15日（月） １2：10
LiveCampusの「授業連絡」から「返信」で行ってください。
「終わった」または「終わらなかった」のいずれかで答えてください。
以上