canvasとWebGLによるコンピュータ・グラフィックスの基礎

第９週 WebGLによる３次元ＣＧ（２）（2014年 6月13日）

実習課題

課題#09：キーボードからの入力によって立方体を操作せよ。（サンプル）

操作説明

• 矢印キー [←] または [→] で回転します。
• [Page Up] キーでズームイン、 [Page Down] キーでズームアウトします。

制作例（提出確認）

• 12121016 標準仕様
• 12121098 標準仕様 + [↑] [↓]
• 12121612 標準仕様
• 12121630 標準仕様 + [Home] [End] [↑] [↓]
• 12122161 [↑←↓→] 場所の移動、[Home] [End] 回転 [Page Up] [Page Down]　遠近 + ピラミッド
• 12122583 標準仕様 + [Home] [End] [↑] [↓]
• 12123349 標準仕様 + [↑] [↓]
• 12123587 標準仕様 + [↑] [↓] + 変色
• 12123826 <K>eyCode

おまけ

• キーボードによる操作（二方向の回転）
  矢印キー [↑] または [↓] でｘ軸まわりに回転します。
  矢印キー [←] または [→] でｙ軸まわりに回転します。
  [Page Up] キーでズームイン、 [Page Down] キーでズームアウトします。
• マウスによる操作（モデル）
  ドラッグで回転します。
  ホイール操作でズームします。
• マウスによる操作（カメラ）
  ドラッグで回転します。
  ホイール操作でズームします。

参考文献

WebGL

• Giles Thomas, Learning WebGL
• Google, webglsamples -- Various WebGL Samples
• Khronos, WebGL -- OpenGL ES 2.0 for the Web
• Andreas Anyuru, Professional WebGL Programming: Developing 3D Graphics for the Web, Wrox (2012) ISBN:978-1-1199-6886-3
  吉川邦夫（訳） 「実践プログラミング WebGL」 翔泳社（2012） ISBN:978-4-7981-2953-2
• 松田晃一 「WebGL+HTML5 3DCG プログラミング入門」 カットシステム（2012） ISBN:978-4-87783-273-5
  Kouichi Matsuda and Rodger Lea, WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL, Addison-Wesley Professional (2013) ISBN:978-0-3219-0292-4

檀 裕也
dan@cc.matsuyama-u.ac.jp