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

第3章 いろいろな光源

環境光 (ambient light)

chapter-03/01-ambient-light.html (p.67) text, run

点光源 (point light)

chapter-03/02-point-light.html (p.72) text, run, diff

スポット光源 (spot light)

chapter-03/03-spot-light.html (p.76) text, run, diff

spotLight の向きを変更するには、.target に何らかオブジェクトを設定してその位置を変更すればよい。 .target のオブジェクトはsceneにaddされていないと位置の更新が反映されないので注意。 表示したくなければ .target.visible を false にしておけばよい。

03-spot-light.htmlの変更点 text, run 

*** chapter-03/03-spot-light.html	Fri Feb 27 07:04:34 2015
--- nitta-03/03-spot-light.html	Wed Nov  7 15:33:21 2018
***************
*** 111,116 ****
--- 111,121 ----
          var target = new THREE.Object3D();
          target.position = new THREE.Vector3(5, 0, 0);
  
+         var target_plane = new THREE.Mesh(new THREE.PlaneGeometry(1,1,1,1), new THREE.MeshLambertMaterial({color:0x00ff00}));
+         target_plane.position = new THREE.Vector3(0, 0, 0); // spotLight の目標物体
+         target_plane.visible = false;  // 表示する場合は true
+         scene.add(target_plane);       // scene に追加しないと、位置のupdate が行われない。
+         
  
          var pointColor = "#ffffff";
          var spotLight = new THREE.SpotLight(pointColor);
***************
*** 119,125 ****
          spotLight.shadowCameraNear = 2;
          spotLight.shadowCameraFar = 200;
          spotLight.shadowCameraFov = 30;
!         spotLight.target = plane;
          spotLight.distance = 0;
          spotLight.angle = 0.4;
  
--- 124,130 ----
          spotLight.shadowCameraNear = 2;
          spotLight.shadowCameraFar = 200;
          spotLight.shadowCameraFov = 30;
!         spotLight.target = target_plane;  // spotLight のtargetに登録する。
          spotLight.distance = 0;
          spotLight.angle = 0.4;
  
***************
*** 255,260 ****
--- 260,266 ----
  
                  spotLight.position.copy(sphereLightMesh.position);
              }
+             spotLight.target.position.copy(new THREE.Vector3(10*Math.cos(phase), 0, 10*Math.sin(phase))); // 位置の変更
  
              // render using requestAnimationFrame
              requestAnimationFrame(render);

平行光線 (directional light)

chapter-03/04-directional-light.html (p.81) text, run, diff

半球ライト (hemisphere light)

chapter-03/05-hemisphere-light.html (p.81) text, run diff

面光源 (area light)

chapter-03/06-area-light.html (p.86) text, run, diff

レンズフレア (lens flare)

chapter-03/07-lensflares.html (p.89) text, run, diff

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

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

課題3a: 点光源の動きを効果的に用いたオリジナル・シーンを作成する

提出ファイルkadai3a.html
コメント欄:どのようなシーンであるか説明を書きなさい。
提出先: 「宿題提出Web:コンピュータ・グラフィックスb：課題3a」 http://ynitta.com/class/cg2/local/handin/up.php?id=kadai3a

chapter-03/02-point-light.htmlをよく理解し、 これを変更して kadai3a.html を作成せよ。 Sphere と点光源の動きをオリジナルに変更せよ。

サンプルコードのフォルダを learning-threejs-master とします。 learning-threejs-master/chapter-03/02-point-light.html をコピーして learning-threejs-master/kadai/kadai3a.html というファイルを作成しなさい。 その上で kadai3a.html のコードを大幅に変更して、課題の提出条件を満たすように変更しなさい。

提出条件