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

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

[お知らせ]

本課題は、 テクスチャを使った課題 kadai10a.html を元にして、 自由曲線による立体を追加する方法で作成することを強く勧めます。 すなわち、kadai10a.html に、kadai6a.html 内のdrawShape関数と createMesh関数(名前を変更する必要あり)を追加する方が正解に たどりつきやすいと思われます。 kadai6a.html のrender()関数部分は若干面倒なことをしているので、 理解せずにテクスチャの表示を追加するとエラーを起こしやすいように思われます。

提出〆切は2024年6月18日(火) 8:30a.m.です。

最終課題: Three.js の知識を駆使してシーンを作る

提出ファイルkadaiL.html, readme.txt, (必要ならば)pngファイル等
readme.txtどのようなシーンであるか説明を書きなさい。
提出先: http://ynitta.com/class/cg2/local/handin/up.php?id=kadaiL

Three.js の知識を駆使した作品を作りなさい。 ただし、以下の要素を全て必ず使うこと。

提出条件

お知らせ (Jun/12/2024)

自由曲線で作成したジオメトリや、それを extrude (=押し出し) たジオメトリに テクスチャやバンプマッピングを適用するプログラム例を以下に示します。

下のコードは、テクスチャ画像がオリジナルではないので課題の仕様を満たしていません。 あくまでも、オリジナルからなるべく少ない変更で自由曲線を使う方法を示すためのものです。

chapter-10/02-bump-map.htmlで自由曲線に変更する
*** chapter-10/02-bump-map.html	Wed Jun 12 16:58:39 2024
--- nitta-10bezier/kadai10bezierAbbr.html	Wed Jun 12 17:05:24 2024
***************
*** 44,55 ****
          webGLRenderer.setSize(window.innerWidth, window.innerHeight);
          webGLRenderer.shadowMapEnabled = true;
  
!         var sphere1 = createMesh(new THREE.BoxGeometry(15, 15, 2), "stone.jpg");
          sphere1.rotation.y = -0.5;
          sphere1.position.x = 12;
          scene.add(sphere1);
  
!         var sphere2 = createMesh(new THREE.BoxGeometry(15, 15, 2), "stone.jpg", "stone-bump.jpg");
          sphere2.rotation.y = 0.5;
          sphere2.position.x = -12;
          scene.add(sphere2);
--- 44,55 ----
          webGLRenderer.setSize(window.innerWidth, window.innerHeight);
          webGLRenderer.shadowMapEnabled = true;
  
!         var sphere1 = createMesh(new THREE.ShapeGeometry(drawShape()), "stone.jpg");
          sphere1.rotation.y = -0.5;
          sphere1.position.x = 12;
          scene.add(sphere1);
  
!         var sphere2 = createMesh(new THREE.ShapeGeometry(drawShape()), "stone.jpg", "stone-bump.jpg");
          sphere2.rotation.y = 0.5;
          sphere2.position.x = -12;
          scene.add(sphere2);
***************
*** 66,74 ****
  
          // position and point the camera to the center of the scene
          camera.position.x = 00;
!         camera.position.y = 12;
!         camera.position.z = 28;
!         camera.lookAt(new THREE.Vector3(0, 0, 0));
  
          var ambiLight = new THREE.AmbientLight(0x242424);
          scene.add(ambiLight);
--- 66,74 ----
  
          // position and point the camera to the center of the scene
          camera.position.x = 00;
!         camera.position.y = 32;
!         camera.position.z = 58;
!         camera.lookAt(new THREE.Vector3(0, 5, 0));
  
          var ambiLight = new THREE.AmbientLight(0x242424);
          scene.add(ambiLight);
***************
*** 94,103 ****
--- 94,107 ----
  
              this.changeTexture = function (e) {
                  var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + e + ".jpg");
+ 		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+ 		texture.repeat.set(0.1,0.1);
                  sphere2.material.map = texture;
                  sphere1.material.map = texture;
  
                  var bump = THREE.ImageUtils.loadTexture("../assets/textures/general/" + e + "-bump.jpg");
+ 		bump.wrapS = texture.wrapT = THREE.RepeatWrapping;
+ 		bump.repeat.set(0.1,0.1);
                  sphere2.material.bumpMap = bump;
              };
  
***************
*** 116,129 ****
--- 120,148 ----
  
          render();
  
+ 	function drawShape() {
+ 
+             // create a basic shape
+             var shape = new THREE.Shape();
+ 
+ 	    // 自分で自由曲線で形を定義すること
+ 	    
+             // return the shape
+             return shape;
+         }
+ 	
          function createMesh(geom, imageFile, bump) {
              var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
+ 	    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+ 	    texture.repeat.set(0.1,0.1);
              geom.computeVertexNormals();
              var mat = new THREE.MeshPhongMaterial();
              mat.map = texture;
  
              if (bump) {
                  var bump = THREE.ImageUtils.loadTexture("../assets/textures/general/" + bump);
+ 		bump.wrapS = bump.wrapT = THREE.RepeatWrapping;
+ 		bump.repeat.set(0.1,0.1);
                  mat.bumpMap = bump;
                  mat.bumpScale = 0.2;
                  console.log('d');

さらに extrude する
*** nitta-10bezier/kadai10bezierAbbr.html	Wed Jun 12 17:05:24 2024
--- nitta-10extrude/kadai10extrudeAbbr.html	Wed Jun 12 17:14:52 2024
***************
*** 44,55 ****
          webGLRenderer.setSize(window.innerWidth, window.innerHeight);
          webGLRenderer.shadowMapEnabled = true;
  
!         var sphere1 = createMesh(new THREE.ShapeGeometry(drawShape()), "stone.jpg");
          sphere1.rotation.y = -0.5;
          sphere1.position.x = 12;
          scene.add(sphere1);
  
!         var sphere2 = createMesh(new THREE.ShapeGeometry(drawShape()), "stone.jpg", "stone-bump.jpg");
          sphere2.rotation.y = 0.5;
          sphere2.position.x = -12;
          scene.add(sphere2);
--- 44,63 ----
          webGLRenderer.setSize(window.innerWidth, window.innerHeight);
          webGLRenderer.shadowMapEnabled = true;
  
! 	var options = {
! 	    amount: 2,
! 	    bevelThickness: 2,
! 	    bevelSize: 0.5,
! 	    bevelEnabled: true,
! 	    curveSegments: 12,
! 	    steps: 1,
! 	};
!         var sphere1 = createMesh(new THREE.ExtrudeGeometry(drawShape(), options), "stone.jpg");
          sphere1.rotation.y = -0.5;
          sphere1.position.x = 12;
          scene.add(sphere1);
  
!         var sphere2 = createMesh(new THREE.ExtrudeGeometry(drawShape(), options), "stone.jpg", "stone-bump.jpg");
          sphere2.rotation.y = 0.5;
          sphere2.position.x = -12;
          scene.add(sphere2);