Web3Dを用いた数学教材の作成
札幌稲北高校 早苗雅史
このページには「Web3D」で作成されたファイルがあります。そのため3DXプレイヤをインストールする必要があります。(3DXプレイヤのダウンロードは無料) 3DXプレイヤの最新版についての情報は(株)マイクロネットのサイトをご覧下さい。 |
1.Web3Dとは
Web3DはWWW上に3DCGの空間を構築し,Web上でウォークスルー,アニメーション,オブジェクトサフェースなどのの表現を可能にする技術の事である。既にWeb3D用にいくつかのソフトが開発され,供給されている。
今回紹介する「3DAtelier3.5IT」はActive-Xベースでの圧縮・通信技術をサポートしたWeb3D機能を搭載し(以下3DXと呼ぶ),次のような特徴がある。
- データサイズはVRMLのほぼ1/10,shockwave3dの約1/2
- Active-XベースなのでMs-officeに配置可能
- サフェースにはhtml,WAVサウンド,アニメーションが可能
- アニメーションなどのイベントに「トリガ」が関連付けられている
- html空間上に3D空間が自由に配置可能(html上にはわずか数行で配置)
- スクリプトを組まずイベント分岐が可能
開発もとの(株)マイクロネットは札幌に本社を構えるベンチャー企業で,教育機関に向けてのCG教育コンサルテーション,教材開発なども行っている。詳しくは次のページをご覧頂きたい。
マイクロネットホームページ http://micronetclub.co.jp/
2.円錐・立方体の切断面
3次元空間における図形をイメージ化することは,とても難しいことだといえる。簡単な3次元図形の展開図や切断面などは既に小学校のカリキュラムの中に現れるが,とても板書だけでは理解し得るものではない。
しかし,コンピュータを用いることによって,そうしたイメージしにくい3次元空間の世界をより身近なものへと私達を導いてくれる。
基本的な物体(プリミティブ)の切断面については,既にVRMLを用いた教材についていくつか扱ってきた。
VRMLはテキストベースで作成(ファイルの拡張子をwrlで保存)するだけで,すぐに表示できて移動・回転できるところが手軽で使いやすいといえる。しかし,少し複雑なオブジェクトを作るとブラウザ上での表示が遅くなる欠点がある。
3DXではモデラーを用いて視覚的にオブジェクトを作成し,また簡単にWeb3Dに変換できるのが特徴である(VRMLへの変換も可能)。また,データ量が小さいため取り込み速度が速く,表示がとてもスムーズにできる。
次の図はモデラーを用いて円錐と平面を同時に作成し,切断面を画面4分割によって様々な角度から見たものである。作成は基本形状(プリミティブ)から任意のシェイプを選び,それを拡大・縮小,移動,回転して作成する。
また各シェイプの形状を数値入力でcoordinateすることも可能である。(数学的にはこの方が作成しやすいかもしれない)
3.Web上への変換
これらの切断面をWeb上で再現してみる。Web化することで教材を共有でき,また教材のデータベース化を可能とする。
モデラーで作成したオブジェクトは簡単に3DXに変換できる。変換したものが次のものである(corn_cut.3dx,1KB)。円錐と平面を視点を上においたもので,平面(または円錐)の任意の位置でマウス右ボタンドラッグで回転させることができる。ピポット(回転の中心)はオブジェクト中心に置いてある。
*3DXファイルを利用するためにはプラグインとして「3DXプレイヤ」をインストールする必要がある。(3DXプレイヤのダウンロードは無料) 3DXプレイヤの最新版についての情報は(株)マイクロネットのサイトにてご覧頂きたい。
ActiveXプレイヤではコントロールパネルを使ってカメラ(視点)を自由に動かすことが出きる。VRMLなどと同様な一般的なインターフェイスを備えている。以下に3DXプレイヤの操作方法をあげておく。
アイコン |
働き |
備考 |
|
ホームポジション |
クリックすると、カメラが最初の位置に戻す |
|
速度調節 |
クリックすると3段階に速度を調節する |
|
前後移動 |
クリックしてからスクリーン上でマウスをドラッグする |
|
上下左右移動 |
|
|
上下左右回転 |
|
|
バンク回転 |
|
3DXプレイヤの操作方法
4.切断面のアニメ化
次に切断面の様子をアニメーション化してみよう。モーションエディタでいくつかの2つのキーフレームに切断する平面の最初と最後を配置する。平面を動かすことで切断面がどうなるかをアニメーションで見てみるのである。
視点としてのカメラも左から右へといくつかのキーフレームに割り当て,動きのあるカメラワークにしてみよう。
マテリアルを設定して3DXへ書き出したものが,次のアニメーションである(box_cut_anim.3dx,2kb)。2つのグループ(一つは静止状態,もう一つはアニメーション用)を設定してあるので,マウスカーソルがになった状態でダブルクリックするとアニメーションが始まる。
5.ブーリアン演算による穴開き立方体の作成
次にブーリアン演算を用いたオブジェクトの作成をしてみよう。CGではCSG(Constructive
Solid Geometry)といって,基本的な物体(プリミティブ)を和集合,積集合,差集合といった演算で組み合わせて形状のモデリングをする基本的なテクニックである。
いま,立方体の各辺を3等分してできる中央部分の直方体をくり抜いた立体を作成する。次の図のように立方体と3つの直方体の差をとるブーリアン演算を考えると,目的のオブジェクトができる。
3DAtelierのモデラーでは右のように3つのブーリアン演算が用意されている。
こうしたCGにおける考え方は数学の多くの分野に応用することができる。更に詳しい内容は,次のページにまとめてあるので参照していただきたい。
作成した穴開き立方体に平面を付け加えてWeb3Dにおとしたものが,次のものである。
なお,穴開き立方体を更に再帰的に作成していくとフラクタルな興味あるオブジェクトが作成される。それについては第18回の北海道数学コンテストに出題されているので,是非ご覧頂きたい。