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

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

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

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

任意の物体形状 (Geometory) を頂点 (vertices) と面 (faces) から構成する方法については chapter-02/05-custom-geometry.html の86行から115行までが参考になる。

提出条件

読み込んでよいjavascriptのファイルは、教科書のサンプルコードの中の learning-three-js/libs/ の下のファイルだけとする。HTMLファイル中では "../libs/" というパスで読み込むこと。これ以外の、javascriptのコードはすべて提出するHTMLファイル中に記述すること。
10個以上の頂点で構成されたオリジナルな「閉じた立体」を、シーンに登場させること。自分で定義した物体は、たとえば動物や乗物など、何らかの具体的な意味のある形状であることが重要である。
エラーなく動作すること。

ヒント

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);