final? commit

index.html

@@ -33,7 +33,7 @@
 			</p>
 			<p>
 				<canvas id="HelloCanvas0"></canvas>
-				<script src="pointlightshadow0.js"></script>	
+				<script src="script.js"></script>	
 			</p>
 			<p>
 				위의 렌더링 결과를 보아라. 중심 좌표에 PointLight를 두었을 때, 뒷편의 면에 빛이 어떻게 도달하는지를 나타낸다.
@@ -42,7 +42,7 @@
 			</p>
 			<p>
 				<canvas id="HelloCanvas1"></canvas>
-				<script src="pointlightshadow1.js"></script>	
+				<script src="script1.js"></script>	
 			</p>
 			<p>
 				위는 중앙의 pointlight을 두고, 주위로 8개의 물체를 두었을 때 이다.

script.js

+const function_0 = function(){
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.z = 10; // (0,0,z)에서 (0,0,0)을 보고있는 것
+
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas0}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+renderer2.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+light2.position.set( 0, 0, 0 );
+scene2.add( light2 );
+
+const planeGeometry2 = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial2 = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane2 = new THREE.Mesh( planeGeometry2, planeMaterial2 );
+plane2.position.z = -30;
+scene2.add( plane2 );
+
+renderer2.render( scene2, camera2 );
+}
+function_0();
\ No newline at end of file

script1.js

+const function_1 = function(){
+    const h_scr2 = window.innerWidth;
+    const v_scr2 = window.innerHeight;
+    const scene2 = new THREE.Scene();
+    const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+    camera2.position.z = 10; // (0,0,z)에서 (0,0,0)을 보고있는 것
+    
+    const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas1}); 
+    renderer2.setSize( h_scr2, v_scr2 ); 
+  
+    const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+    light2.position.set( 0, 0, 0 );
+    scene2.add( light2 );
+
+
+    const sphereGeometry = new THREE.SphereGeometry( 2, 32, 32 );
+    const sphereMaterial = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+    const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+    sphere.position.set(0,8,0);
+    scene2.add( sphere );
+
+    const sphereGeometry2 = new THREE.SphereGeometry( 2, 32, 32 );
+    const sphereMaterial2 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+    const sphere2 = new THREE.Mesh( sphereGeometry2, sphereMaterial2 );
+    sphere2.position.set(-8,8,0);
+    scene2.add( sphere2 );
+
+    const sphereGeometry3 = new THREE.SphereGeometry( 2, 32, 32 );
+    const sphereMaterial3 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+    const sphere3 = new THREE.Mesh( sphereGeometry3, sphereMaterial3 );
+    sphere3.position.set(-8,0,0);
+    scene2.add( sphere3 );
+
+    const sphereGeometry4 = new THREE.SphereGeometry( 2, 32, 32 );
+    const sphereMaterial4 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+    const sphere4 = new THREE.Mesh( sphereGeometry4, sphereMaterial4 );
+    sphere4.position.set(-8,-8,0);
+    scene2.add( sphere4 );
+
+    const sphereGeometry5 = new THREE.SphereGeometry( 2, 32, 32 );
+    const sphereMaterial5 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+    const sphere5 = new THREE.Mesh( sphereGeometry5, sphereMaterial5 );
+    sphere5.position.set(0,-8,0);
+    scene2.add( sphere5 );
+
+    const sphereGeometry6 = new THREE.SphereGeometry( 2, 32, 32 );
+    const sphereMaterial6 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+    const sphere6 = new THREE.Mesh( sphereGeometry6, sphereMaterial6 );
+    sphere6.position.set(8,-8,0);
+    scene2.add( sphere6 );
+
+    const sphereGeometry7 = new THREE.SphereGeometry( 2, 32, 32 );
+    const sphereMaterial7 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+    const sphere7 = new THREE.Mesh( sphereGeometry7, sphereMaterial7 );
+    sphere7.position.set(8,0,0);
+    scene2.add( sphere7 );
+
+    const sphereGeometry8 = new THREE.SphereGeometry( 2, 32, 32 );
+    const sphereMaterial8 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+    const sphere8 = new THREE.Mesh( sphereGeometry8, sphereMaterial8 );
+    sphere8.position.set(8,8,0);
+    scene2.add( sphere8 );
+
+    
+    const planeGeometry2 = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+    const planeMaterial2 = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+    const plane2 = new THREE.Mesh( planeGeometry2, planeMaterial2 );
+    plane2.position.z = -30;
+    scene2.add( plane2 );
+
+
+    renderer2.render( scene2, camera2 );
+    }
+    function_1();
\ No newline at end of file

script2.js

+const function0 = function(){
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.y = 15;
+camera2.lookAt(0,0,0); 
+
+//Create a WebGLRenderer and turn on shadows in the renderer
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+//const light2 = new THREE.DirectionalLight( 0xffffff, 1);
+//light2.position.set( 0, 0, 1 );
+//directioanl은 항상 위에서 온다.
+//light2.rotaion.x = 90;
+light2.castShadow = true; // default false
+//light2.autoUpdate = false;
+scene2.add( light2 );
+
+//Set up shadow properties for the light
+//light2.shadow.mapSize.width = 128; // default
+//light2.shadow.mapSize.height = 128; // default
+//light2.shadow.camera.near = 0.5; // default
+//light2.shadow.camera.far = 500; // default
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
+const sphereMaterial = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene2.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+plane.rotation.x = -1.57;
+plane.position.set(0,-5,0);
+scene2.add( plane );
+
+//Create a helper for the shadow camera (optional)
+const helper = new THREE.CameraHelper( light2.shadow.camera );
+scene2.add( helper );
+
+
+var x = -12;
+var x_trans = 0;
+const animate = function () {
+	requestAnimationFrame( animate );
+
+    if(x>=12)
+    {
+        x_trans = -0.1;
+    }
+    else if(x<=-12)
+    {
+        x_trans = +0.1;
+    }
+
+    x += x_trans;
+
+
+	light2.position.set( x, 10, 0 );
+
+	renderer2.render( scene2, camera2 );
+};
+animate();
+}
+function0();
\ No newline at end of file

script3.js

+const function1 = function(){
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.y = 15;
+camera2.lookAt(0,0,0); 
+
+//Create a WebGLRenderer and turn on shadows in the renderer
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas2}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+//const light2 = new THREE.DirectionalLight( 0xffffff, 1);
+//light2.position.set( 0, 0, 1 );
+//directioanl은 항상 위에서 온다.
+//light2.rotaion.x = 90;
+light2.castShadow = true; // default false
+light2.position.set(0,5,0);
+//light2.autoUpdate = false;
+scene2.add( light2 );
+
+//Set up shadow properties for the light
+//light2.shadow.mapSize.width = 128; // default
+//light2.shadow.mapSize.height = 128; // default
+//light2.shadow.camera.near = 0.5; // default
+//light2.shadow.camera.far = 500; // default
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
+const sphereMaterial = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene2.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+plane.rotation.x = -1.57;
+plane.position.set(0,-5,0);
+scene2.add( plane );
+
+
+
+
+var x = -12;
+var x_trans = 0;
+const animate = function () {
+	requestAnimationFrame( animate );
+    if(light2.position.y <= 10)
+    {
+        light2.position.y += 0.01;
+    }
+    else
+    {
+        light2.position.y = 5;
+    }
+    
+
+	renderer2.render( scene2, camera2 );
+};
+animate();
+}
+function1();
\ No newline at end of file

script4.js

+const function4 = function(){
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.y = 15;
+camera2.lookAt(0,0,0); 
+
+//Create a WebGLRenderer and turn on shadows in the renderer
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas4}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+//const light2 = new THREE.DirectionalLight( 0xffffff, 1);
+//light2.position.set( 0, 0, 1 );
+//directioanl은 항상 위에서 온다.
+//light2.rotaion.x = 90;
+light2.castShadow = true; // default false
+//light2.autoUpdate = false;
+scene2.add( light2 );
+
+//Set up shadow properties for the light
+//light2.shadow.mapSize.width = 128; // default
+//light2.shadow.mapSize.height = 128; // default
+light2.shadow.camera.near = 20;
+//light2.shadow.camera.far = 500; // default
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
+const sphereMaterial = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene2.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+plane.rotation.x = -1.57;
+plane.position.set(0,-5,0);
+scene2.add( plane );
+
+//Create a helper for the shadow camera (optional)
+const helper = new THREE.CameraHelper( light2.shadow.camera );
+scene2.add( helper );
+
+
+var x = -12;
+var x_trans = 0;
+const animate = function () {
+	requestAnimationFrame( animate );
+
+    if(x>=12)
+    {
+        x_trans = -0.1;
+    }
+    else if(x<=-12)
+    {
+        x_trans = +0.1;
+    }
+
+    x += x_trans;
+
+
+	light2.position.set( x, 10, 0 );
+
+	renderer2.render( scene2, camera2 );
+};
+animate();
+}
+function4();
\ No newline at end of file

script5.js

+const function5 = function(){
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.y = 15;
+camera2.lookAt(0,0,0); 
+
+//Create a WebGLRenderer and turn on shadows in the renderer
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas5}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+//const light2 = new THREE.DirectionalLight( 0xffffff, 1);
+//light2.position.set( 0, 0, 1 );
+//directioanl은 항상 위에서 온다.
+//light2.rotaion.x = 90;
+light2.castShadow = true; // default false
+scene2.add( light2 );
+
+
+//Set up shadow properties for the light
+light2.shadow.mapSize.width = 128; // default
+light2.shadow.mapSize.height = 128; // default
+//light2.shadow.camera.near = 0.5; // default
+//light2.shadow.camera.far = 500; // default
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
+const sphereMaterial = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene2.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+plane.rotation.x = -1.57;
+plane.position.set(0,-5,0);
+scene2.add( plane );
+
+
+var x = -12;
+light2.position.set( x, 10, 0 );
+
+
+	
+	renderer2.render( scene2, camera2 );
+}
+function5();
\ No newline at end of file

script6.js

+const function6 = function(){
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.y = 15;
+camera2.lookAt(0,0,0); 
+
+//Create a WebGLRenderer and turn on shadows in the renderer
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas6}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+//const light2 = new THREE.DirectionalLight( 0xffffff, 1);
+//light2.position.set( 0, 0, 1 );
+//directioanl은 항상 위에서 온다.
+//light2.rotaion.x = 90;
+light2.castShadow = true; // default false
+scene2.add( light2 );
+
+
+//Set up shadow properties for the light
+light2.shadow.mapSize.width = 1024; // default
+light2.shadow.mapSize.height = 1024; // default
+//light2.shadow.camera.near = 0.5; // default
+//light2.shadow.camera.far = 500; // default
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
+const sphereMaterial = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene2.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+plane.rotation.x = -1.57;
+plane.position.set(0,-5,0);
+scene2.add( plane );
+
+
+var x = -12;
+light2.position.set( x, 10, 0 );
+
+
+	
+	renderer2.render( scene2, camera2 );
+}
+function6();
\ No newline at end of file

script7.js

+const function7 = function(){
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.y = 15;
+camera2.lookAt(0,0,0); 
+
+//Create a WebGLRenderer and turn on shadows in the renderer
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas7}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+//const light2 = new THREE.DirectionalLight( 0xffffff, 1);
+//light2.position.set( 0, 0, 1 );
+//directioanl은 항상 위에서 온다.
+//light2.rotaion.x = 90;
+light2.castShadow = true; // default false
+scene2.add( light2 );
+
+
+//Set up shadow properties for the light
+light2.shadow.mapSize.width = 1024; // default
+light2.shadow.mapSize.height = 1024; // default
+light2.shadow.radius = 20;
+//light2.shadow.camera.near = 0.5; // default
+//light2.shadow.camera.far = 500; // default
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
+const sphereMaterial = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene2.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+plane.rotation.x = -1.57;
+plane.position.set(0,-5,0);
+scene2.add( plane );
+
+
+var x = -12;
+light2.position.set( x, 10, 0 );
+
+
+	
+	renderer2.render( scene2, camera2 );
+}
+function7();
\ No newline at end of file

script8.js

+const function8 = function(){
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.y = 15;
+camera2.lookAt(0,0,0); 
+
+//Create a WebGLRenderer and turn on shadows in the renderer
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas8}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+//const light2 = new THREE.DirectionalLight( 0xffffff, 1);
+//light2.position.set( 0, 0, 1 );
+//directioanl은 항상 위에서 온다.
+//light2.rotaion.x = 90;
+light2.castShadow = true; // default false
+scene2.add( light2 );
+
+
+//Set up shadow properties for the light
+light2.shadow.mapSize.width = 1024; // default
+light2.shadow.mapSize.height = 1024; // default
+light2.shadow.radius = 100;
+//light2.shadow.camera.near = 0.5; // default
+//light2.shadow.camera.far = 500; // default
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
+const sphereMaterial = new THREE.MeshPhongMaterial( { 
+    color: 0xff0000, shininess : 90.0 });
+const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+sphere.castShadow = true; //default is false
+sphere.receiveShadow = false; //default
+scene2.add( sphere );
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane = new THREE.Mesh( planeGeometry, planeMaterial );
+plane.receiveShadow = true;
+plane.rotation.x = -1.57;
+plane.position.set(0,-5,0);
+scene2.add( plane );
+
+
+var x = -12;
+light2.position.set( x, 10, 0 );
+
+
+	
+	renderer2.render( scene2, camera2 );
+}
+function8();
\ No newline at end of file

script9.js

+const function1 = function(){
+//그림자옵션이 꺼질 때의 점광원 테스트
+//그 테스트는 구에서 시행할 것
+//그림자로 인해 도형이 어두워지는 것과 그냥 빛을 받지않아 도형이 어두워진 것을 표현하는 것과의 차이를 분석할 것.
+//그렇게 점광원과 점광원 그림자에 대한 테스트를 진행한 후 점광원 그림자 관련 함수들을 사용해보면서 변화를 설명할 것.
+//변수명의 뒤에는 종류와 무관하게 파일 번호를 입력할 것.
+const h_scr2 = window.innerWidth;
+const v_scr2 = window.innerHeight;
+//const h_scr = 800;
+//const v_scr = 750;
+const scene2 = new THREE.Scene();
+const camera2 = new THREE.PerspectiveCamera(120, h_scr2/v_scr2, 0.1, 1000);
+camera2.position.z = 10; // (0,0,z)에서 (0,0,0)을 보고있는 것
+camera2.position.x = 30;
+
+//Create a WebGLRenderer and turn on shadows in the renderer
+const renderer2 = new THREE.WebGLRenderer({canvas: HelloCanvas2}); 
+renderer2.setSize( h_scr2, v_scr2 ); 
+renderer2.shadowMap.enabled = true;
+renderer2.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+
+//Create a PointLight and turn on shadows for the light
+const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
+//const light2 = new THREE.DirectionalLight( 0xffffff, 1);
+light2.position.set( 0, 0, 0 );
+//light2.position.set( 0, 0, 1 );
+//directioanl은 항상 위에서 온다.
+//light2.rotaion.x = 90;
+light2.castShadow = true; // default false
+scene2.add( light2 );
+
+//Set up shadow properties for the light
+light2.shadow.mapSize.width = 512; // default
+light2.shadow.mapSize.height = 512; // default
+light2.shadow.camera.near = 0.5; // default
+light2.shadow.camera.far = 500; // default
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry2 = new THREE.SphereGeometry( 1, 32, 32 );
+const sphereMaterial2 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+const sphere2 = new THREE.Mesh( sphereGeometry2, sphereMaterial2 );
+sphere2.castShadow = true; //default is false
+sphere2.receiveShadow = true; //default
+sphere2.position.z = -5
+//sphere2.position.z = -5
+scene2.add( sphere2 );
+
+//Create a sphere that cast shadows (but does not receive them)
+const sphereGeometry2_1 = new THREE.SphereGeometry( 5, 32, 32 );
+const sphereMaterial2_1 = new THREE.MeshPhongMaterial( { 
+    color: 0xffff00, shininess : 90.0 });
+const sphere2_1 = new THREE.Mesh( sphereGeometry2_1, sphereMaterial2_1 );
+sphere2_1.castShadow = true; //default is false
+sphere2_1.receiveShadow = true; //default
+sphere2_1.position.z = -15
+//sphere2_1.position.z = -15
+scene2.add( sphere2_1 );
+
+
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry2 = new THREE.PlaneGeometry( 60, 60, 32, 32 );
+const planeMaterial2 = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane2 = new THREE.Mesh( planeGeometry2, planeMaterial2 );
+plane2.receiveShadow = true;
+plane2.position.z = -30;
+scene2.add( plane2 );
+
+//Create a helper for the shadow camera (optional)
+const helper2 = new THREE.CameraHelper( light2.shadow.camera );
+scene2.add( helper2 );
+
+
+var x2 = -8;
+var z2 = 0;
+var x_trans2 = 0;
+
+const animate2 = function () {
+	requestAnimationFrame( animate2 );
+/*
+    if(x2>=8)
+    {
+        x_trans2 = -0.1;
+    }
+    else if(x2<=-8)
+    {
+        x_trans2 = +0.1;
+    }
+
+    x2 += x_trans2;
+
+
+	light2.position.set( x, 0, 0 );
+    plane2.position.z = -30;
+    */
+    plane2.position.z -= 0.05;
+
+	renderer2.render( scene2, camera2 );
+};
+//animate2();
+renderer2.render( scene2, camera2 );
+}
+function1();
\ No newline at end of file

second.html

@@ -41,17 +41,17 @@
             <p>
 			<script src="js/three.js"></script>
 		    <canvas id="HelloCanvas"></canvas>
-			<script src="pointlightshadow2.js"></script>	
+			<script src="script2.js"></script>	
             </p>
             <p>
                 위의 렌더링에서는 광원의 위치만 변경하고 있다. 광원의 위치에 따라 그림자가 생성되는 것을 확인할 수 있다.
                 그런데 자세히 보면 빛이 중앙으로 올 때, 구체의 크기보다 그림자가 큰 것을 확인할 수 있다.
-                이것은 광원이 pointlight이기 때문이며, 물체와 광원과의 거리에 따라 그림자의 크기가 달라질 것이다.
+                이것은 광원이 점광원이기 때문이며, 물체와 광원과의 거리에 따라 그림자의 크기가 달라질 것이다.
                 한번 광원의 위치를 점차 구체로 부터 멀어지게 해볼까?
             </p>
             <p>
 			    <canvas id="HelloCanvas2"></canvas>
-			    <script src="pointlightshadow3.js"></script>	
+			    <script src="script3.js"></script>	
             </p>
             <h2>
                 property 첫번째 : camera
@@ -65,7 +65,7 @@
             </p>
             <p>
                 <canvas id="HelloCanvas4"></canvas>
-			    <script src="pointlightshadow4.js"></script>	
+			    <script src="script4.js"></script>	
             </p>
             <p>
 			    default값은 near : 0.5, far : 500 이다.
@@ -105,18 +105,18 @@
             <h4>128</h4>
             <p>
                 <canvas id="HelloCanvas5"></canvas>
-			    <script src="pointlightshadow5.js"></script>	
+			    <script src="script5.js"></script>	
             </p>           
             <h4>1024</h4>
             <p>
                 <canvas id="HelloCanvas6"></canvas>
-			    <script src="pointlightshadow6.js"></script>	
+			    <script src="script6.js"></script>	
             </p>     
             <h2>
                 property 세번째 : radius
             </h2>
             <p>
-                그림자에 blur처리를 할 수 있게된다. blur처리를 통해 원래는 pointlight 특성상 그림자의 경계가 진하게, 뚜렷하게 나타나 어색한 느낌을 받기도 하는데,
+                그림자에 blur처리를 할 수 있게된다. blur처리를 통해 원래는 점광원 특성상 그림자의 경계가 진하게, 뚜렷하게 나타나 어색한 느낌을 받기도 하는데,
                 그 느낌을 지워줄 수 있다.
             </p>
             <p>
@@ -130,14 +130,14 @@
             </h4>
             <p>
                 <canvas id="HelloCanvas7"></canvas>
-			    <script src="pointlightshadow7.js"></script>	
+			    <script src="script7.js"></script>	
             </p> 
             <h4>
                 값을 키워주면 그림자를 통해 생동감을 줄 수 있다. 100으로 값을 바꿔보자 | 색깔은 열정의 색 빨강으로 바꿔보자 :)
             </h4>
             <p>
                 <canvas id="HelloCanvas8"></canvas>
-			    <script src="pointlightshadow8.js"></script>	
+			    <script src="script8.js"></script>	
             </p> 
 	</body>
 </html>