コンピュータグラフィクスb

第1章 Three.js を使ってシーンを作成する

Scene を作成して、 PerspectiveCamera や3D物体を追加していく。 3D Object は Geometry と Material から Mesh として生成する。 Scene データから2次元画像をレンダリングするのが WebGLRenderer である。座標軸を表示した方がわかりやすいので、下の例では AxesHelper もSceneに追加している。軸を見るとわかるように、右手座標系(x軸:赤, y軸:緑, z軸:青)が表示される。下の例では、ワイヤーフレームの場合のMaterial は MeshBasicMaterial({color: 色, wireframe:true}) で、面を塗る場合は MeshLambertMaterial({color: 色}) を利用している。

ワイヤーフレームによる表示

chapter-01/02-first-scene.html (p.14-15) text, run

光源追加と面のレンダリング

光源として SpotLight を使ってみる。SpotLightがどの向きを照らすかは .target で指定する(この例では指定していない)。

chapter-01/03-materials-light.html (p.19) text, run, diff

アニメーション

アニメーションにするには、 requestAnimatiornFrame(関数名) を利用する。これは普通のjavascriptに用意されている関数である。下の例では次のようにして利用している。

function renderScene() {
    ...
    requestAnimationFrame(renderScene);
    renderer.render(scene, camera);
}

アニメーションの状態(FPS)を表示するために mrdoob が開発した Stats を利用している(../libs/ の下にある)。

chapter-01/04-materials-light-animation.html (p.22) text, run, diff

dat.GUI を利用してパラメータを変更可能にする

プログラム中のパラメータを直感的なGUIで操作するために dat.gui を使っている(../libs/ の下にある)。

chapter-01/05-control-gui.html (p.27) text, run, diff

ブラウザのリサイズに対応する

ブラウザのウィンドウサイズが変更されると'resize'イベントが発生する。そのときに起動する関数を以下のように設定している。

 window.addEventListener('resize', onResize, false)

chapter-01/06-screen-size-change.html (p.27) text, run, diff

コンピュータ・グラフィックスb 課題1

作成したプログラムが正しく動作することを確認したら、それぞれの提出先に提出しなさい。提出した後は、正しく提出されていることを http://ynitta.com/class/cg2/local/handin/ で必ず確認しておいて下さい。提出〆切は次回の講義の開始時刻です。

課題1a: 手元の開発環境を整える

提出ファイル	なし
コメント欄:	なし
提出先:	なし

手元に Three.js のプログラムが開発できる環境を整えなさい。手元のWWW サーバ上で教科書の第1章のサンプルコードをすべて動かして、内容を理解しなさい。コードを部分的に変更してみて、動作の違いを比べると理解が深まります。

手元のPCを調べ、WWWサーバを起動する方法を確認しなさい。もしもWWW サーバが起動できない状態であれば、起動できるように設定しなさい。
サンプルコードの zip ファイルを手元のPCにダウンロードし、適切なフォルダで展開しなさい。展開したフォルダ名はデフォルトで learning-threejs-master/ となるはずです。そのフォルダ内でWWWサーバを 8000 番ポートを使って起動しなさい。
手元のPCでブラウザ (google chrome推奨)を起動して http://localhost:8000/ にアクセスしなさい。
ブラウザで http://localhost:8000/chapter-01/06-screen-size-change.html などにアクセスして正しく表示されることを確認しなさい。たとえばこの例では、ブラウザがリサイズされるとページもそれに合わせてリサイズすることを確認しなさい。

課題1b: 動きのあるオリジナル・シーンを作成する

提出ファイル	kadai1b.html
コメント欄:	どのようなシーンであるか説明を書きなさい。
提出先:	「宿題提出Web:コンピュータ・グラフィックスb：課題1b」 http://ynitta.com/class/cg2/local/handin/up.php?id=kadai1b

chapter-01/06-screen-size-change.html を変更して Sphereが独自な動きをするように変更したオリジナルなシーンファイルを作成しなさい。教科書やサンプルと似た動きはオリジナルではなく、提出条件を満さないので注意すること。

サンプルコードのフォルダを learning-threejs-master とします。その中に kadai というフォルダを作成しなさい。 learning-threejs-master/chapter-01/06-screen-size-change.html をコピーして learning-threejs-master/kadai/kadai1b.html というファイルを作成しなさい。その上で kadai1b.html のコードを大幅に変更して、課題の提出条件を満たすように変更しなさい。

提出条件

読み込んでよいjavascriptのファイルは、教科書のサンプルコードの中の learning-three-js/libs/ の下のファイルだけとする。HTMLファイル中では "../libs/" というパスで読み込むこと。これ以外の、javascriptのコードはすべて提出するHTMLファイル中に記述すること。
Sphereが時間の経過にあわせてオリジナルな動きをすること。教科書のプログラムと同じ動きや、似た動きはオリジナルではないので注意すること。
エラーなく動作すること。

参考例

06-screen-size-change.html を変更して kadai1b.html を作成する。

*** chapter-01/06-screen-size-change.html	Fri Feb 27 07:04:34 2015
--- nitta-01/kadai1b.html	Wed Apr 26 11:32:08 2023
***************
*** 116,118 ****
              this.rotationSpeed = 0.02;
!             this.bouncingSpeed = 0.03;
          };
--- 116,118 ----
              this.rotationSpeed = 0.02;
!             this.sphereSpeed = 0.03;
          };
***************
*** 121,123 ****
          gui.add(controls, 'rotationSpeed', 0, 0.5);
!         gui.add(controls, 'bouncingSpeed', 0, 0.5);
  
--- 121,123 ----
          gui.add(controls, 'rotationSpeed', 0, 0.5);
!         gui.add(controls, 'sphereSpeed', 0, 0.5);
  
***************
*** 133,137 ****
              // bounce the sphere up and down
!             step += controls.bouncingSpeed;
!             sphere.position.x = 20 + ( 10 * (Math.cos(step)));
!             sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
  
--- 133,140 ----
              // bounce the sphere up and down
!             step += controls.sphereSpeed;
!             var xx = step - 40 * Math.floor(step / 40);
!             if (xx > 20) xx = 40 - xx;
!             sphere.position.x = xx
!             sphere.position.y = 5;
!             sphere.position.z = 2 + ( 10 * (Math.sin(step)));