コンピュータグラフィクス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://nw.tsuda.ac.jp/class/cg2/local/handin/ で必ず確認しておいて下さい。 提出〆切は次回の講義の開始時刻です。

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

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

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

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

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

提出ファイルkadai1b.html
コメント欄:どのようなシーンであるか説明を書きなさい。
提出先: 「宿題提出Web:コンピュータ・グラフィックスb:課題1b」 http://nw.tsuda.ac.jp/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 のコードを大幅に変更して、課題の提出条件を満たすように変更しなさい。

提出条件

参考例

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	Mon Nov  5 17:34:41 2018
***************
*** 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)));