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
プログラム中のパラメータを直感的な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
作成したプログラムが正しく動作することを確認したら、それぞれの 提出先に提出しなさい。 提出した後は、正しく提出されていることを http://ynitta.com/class/cg2/local/handin/ で必ず確認しておいて下さい。 提出〆切は次回の講義の開始時刻です。
| 提出ファイル | なし |
|---|---|
| コメント欄: | なし |
| 提出先: | なし |
手元に Three.js のプログラムが開発できる環境を整えなさい。 手元のWWW サーバ上で教科書の第1章のサンプルコードをすべて動かして、内容を理解しなさい。 コードを部分的に変更してみて、動作の違いを比べると理解が深まります。
| 提出ファイル | 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 のコードを大幅に変更して、課題の提出条件を満たすように変更しなさい。
| 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)));
|
