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

第2章 基本コンポーネント(構成要素)



基本的なシーン

chapter-02/01-basic-scene.html (p.34) text, run


省略

マテリアルを上書きする

省略

chapter-02/03-forced-materials.html (p.38) text, run, diff


ジオメトリ

chapter-02/04-geometries.html (p.43) text, run, diff


カスタム・ジオメトリ

THREE.SceneUtils.createMultiMaterialObject(geom, materials) は lib/three.js の 26355-26367 行目で定義されています。 この「プログラムでは、同じジオメトリに対して 「緑っぽい面から構成されたメッシュ」と「黒いワイヤーフレームで構成されたメッシュ」 をそれぞれ生成して、グループにして返すという操作を行っています。

chapter-02/05-custom-geometry.html (p.47) text, run, diff


メッシュ

chapter-02/06-mesh-properties.html (p.48) text, run, diff


カメラ

chapter-02/07-both-cameras.html (p.54) text, run, diff


視線の向きを変える

chapter-02/08-cameras-lookat.html (p.43) text, run, diff



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


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

課題2a: 自分で立体を定義する

提出ファイルkadai2a.html
コメント欄:どのような物体を作成したか説明しなさい。
提出先: 「宿題提出Web:コンピュータ・グラフィックスb:課題2a」 http://nw.tsuda.ac.jp/class/cg2/local/handin/up.php?id=kadai2a

chapter-02/06-mesh-properties.html を変更して、 cubeを作成している部分を、自分で定義した3D物体に変更しなさい ファイル名はkadai2a.html とし、 learning-threejs-master/kadaiフォルダに置くこと。

提出条件

ヒント

chapter-02/04-geometries.html をよく読んで、 頂点と面を定義して新しい立体を作成する方法を理解しなさい。

05-custom-geometry.html をよく読んで、頂点と面を定義の仕方を理解すること。 レンダリングされるのは右手座標系である。 面は3頂点のインデックスを並べて定義するが、点の並びが反時計周りの方向が面の表(おもて)を意味することに注意が必要である。

06-mesh-properties.html を立方体 cube ではなく、自分で定義した立体 meshを使うように変更した例は次のように記述できる。 点と面を増やし、何か意味のある物体を構成すればよい。




06-mesh-properties.html を変更して kadai2a.html を作成する。
*** 06-mesh-properties.html	Fri Feb 27 07:04:34 2015
--- kadai2a.html	Tue Nov 13 14:47:01 2018
***************
*** 117,119 ****
          var material = new THREE.MeshLambertMaterial({color: 0x44ff44});
!         var geom = new THREE.BoxGeometry(5, 8, 3);
          var cube = new THREE.Mesh(geom, material);
--- 117,140 ----
          var material = new THREE.MeshLambertMaterial({color: 0x44ff44});
!         var vertices = [
!             new THREE.Vector3(0, 5, 0),
!             new THREE.Vector3(5, 1, 5),
!             new THREE.Vector3(-5, 1, 5),
!             new THREE.Vector3(-5, 1, -5),
!             new THREE.Vector3(5, 1, -5)
!         ];
! 
!         var faces = [
!             new THREE.Face3(0, 2, 1),
!             new THREE.Face3(0, 3, 2),
!             new THREE.Face3(0, 4, 3),
!             new THREE.Face3(0, 1, 4),
!             new THREE.Face3(1, 2, 4),
!             new THREE.Face3(2, 3, 4)
!         ];
! 
!         var geom = new THREE.Geometry();
!         geom.vertices = vertices;
!         geom.faces = faces;
!         geom.computeFaceNormals();
! 
          var cube = new THREE.Mesh(geom, material);