diff --git a/img/0.png b/img/0.png
new file mode 100644
index 0000000000000000000000000000000000000000..4eb78f1ae5928af55dbd614a0ddba142fa1e99b2
Binary files /dev/null and b/img/0.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..f46c786e8e1a2e5ebdce5a00bc78254212043ca1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,69 @@
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>PointLight Shadow - Hngmo.Kim</title>
+		<style>body { margin: 0; }</style>
+	</head>
+	<body>
+		<div>
+			<script src="js/three.js"></script>
+			<p>
+				<h2>
+					본 문서는 그래픽스 조명의 종류중 PointLight에 의해
+					발생하는 그림자(PointLight Shadow)에 대해 three.js에서 어떻게 활용할
+					것인지 학습하는 것을 목표로 한다.
+				</h2>
+				<h3>
+					대부분의 예제 케이스에 대하여 git에 함께 첨부된 js파일 순서에
+					맞추어 확인해 보는 것으로 학습에 도움이 될것이다.
+				</h3>
+			</p>
+			<p>
+				<img src="img/0.png">
+			</p>
+			<p>
+				우선 PointLight에 대해 간단히 되짚어 보고자 한다.
+				PointLight는 한국어로 pointlight이라고도 불린다.
+			</p>
+			<p>
+				빛을 발하는 근원이 기하학적으로 차원이 없는 한 점으로 되어있는 광원을 의미한다.
+			</p>
+			<p>
+				위의 그림과 같이 점을 중심으로 빛이 뻗어 나가게 되는 형태이다.
+			</p>
+			<p>
+				<canvas id="HelloCanvas0"></canvas>
+				<script src="pointlightshadow0.js"></script>	
+			</p>
+			<p>
+				위의 렌더링 결과를 보아라. 중심 좌표에 PointLight를 두었을 때, 뒷편의 면에 빛이 어떻게 도달하는지를 나타낸다.
+				중심부는 밝지만 주변부로 갈수록 어두워진다.
+				이는 pointlight으로 부터 나온 빛이 면에 도달할 때, 면의 주변부로 갈수록 단위면적당 빛의 수가 감소하기 때문이다.
+			</p>
+			<p>
+				<canvas id="HelloCanvas1"></canvas>
+				<script src="pointlightshadow1.js"></script>	
+			</p>
+			<p>
+				위는 중앙의 pointlight을 두고, 주위로 8개의 물체를 두었을 때 이다.
+			</p>
+			<h2>
+				그럼 지금부터 threejs.org의 document에 작성된 LightShadow중 쉽게, 눈에띄게 활용할 수 있는 요소에 대하여 pointlight의 관점에서 살펴보도록 하겠다.
+			</h2>
+			<h3>
+				예제코드의 이해를 위해서는 geometry, transform, camera, pointlight에 대한 three.js 코드 이해가 선행되어야 한다.
+			</h3>
+			<p>
+				각각의 기능에 대해 값을 수정해 가며 그 기능을 어떻게 활용할 수 있는지를 중심으로 보겠다.
+			</p>
+			<h1>
+				<a href="second.html" target = "_self">다음으로</a>
+			</h1>
+			<h3>
+				<p>
+					three.js : PointLightShadow - Kim Hyeongmo
+				</p>
+			</h3>
+		</div>
+	</body>
+</html>
diff --git a/pointlightshadow0.js b/pointlightshadow0.js
new file mode 100644
index 0000000000000000000000000000000000000000..9b7577bf7eafa7165ac4d48cc6d00c05d97daed6
--- /dev/null
+++ b/pointlightshadow0.js
@@ -0,0 +1,25 @@
+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
diff --git a/pointlightshadow1.js b/pointlightshadow1.js
new file mode 100644
index 0000000000000000000000000000000000000000..c50cb5ff53394c6cd35697c183719717573d20ce
--- /dev/null
+++ b/pointlightshadow1.js
@@ -0,0 +1,82 @@
+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
diff --git a/pointlightshadow2.js b/pointlightshadow2.js
new file mode 100644
index 0000000000000000000000000000000000000000..1faebf4c08ced88fb69ad3749f22c15672a491c7
--- /dev/null
+++ b/pointlightshadow2.js
@@ -0,0 +1,74 @@
+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
diff --git a/pointlightshadow3.js b/pointlightshadow3.js
new file mode 100644
index 0000000000000000000000000000000000000000..97a317d44bbc260ac85a3907fe5e85dce2e85545
--- /dev/null
+++ b/pointlightshadow3.js
@@ -0,0 +1,68 @@
+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
diff --git a/pointlightshadow4.js b/pointlightshadow4.js
new file mode 100644
index 0000000000000000000000000000000000000000..f665704952bf9f0113e1b044e990edbae7d4536f
--- /dev/null
+++ b/pointlightshadow4.js
@@ -0,0 +1,74 @@
+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
diff --git a/pointlightshadow5.js b/pointlightshadow5.js
new file mode 100644
index 0000000000000000000000000000000000000000..f0e9735beb44c7825dc3e666cf97ec6ab17cbb3f
--- /dev/null
+++ b/pointlightshadow5.js
@@ -0,0 +1,54 @@
+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
diff --git a/pointlightshadow6.js b/pointlightshadow6.js
new file mode 100644
index 0000000000000000000000000000000000000000..b5079e62c4aaebe9e1c8ae337446bada6790e39c
--- /dev/null
+++ b/pointlightshadow6.js
@@ -0,0 +1,54 @@
+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
diff --git a/pointlightshadow7.js b/pointlightshadow7.js
new file mode 100644
index 0000000000000000000000000000000000000000..918af98b9b428af8d37497ebab695dc7f92780ae
--- /dev/null
+++ b/pointlightshadow7.js
@@ -0,0 +1,55 @@
+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
diff --git a/pointlightshadow8.js b/pointlightshadow8.js
new file mode 100644
index 0000000000000000000000000000000000000000..8a746e879d091d1f423d5ce495f5cd475e2b4d7a
--- /dev/null
+++ b/pointlightshadow8.js
@@ -0,0 +1,55 @@
+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
diff --git a/pointlightshadowelse.js b/pointlightshadowelse.js
new file mode 100644
index 0000000000000000000000000000000000000000..d798c8a44c210a1834aebc4984fc960fcdf898a4
--- /dev/null
+++ b/pointlightshadowelse.js
@@ -0,0 +1,104 @@
+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
diff --git a/second.html b/second.html
new file mode 100644
index 0000000000000000000000000000000000000000..1d2e1e4ba27d6e357f9eb503002342d1c09fb2dd
--- /dev/null
+++ b/second.html
@@ -0,0 +1,143 @@
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>PointLight Shadow - Hngmo.Kim</title>
+		<style>body { margin: 0; }</style>
+	</head>
+	<body>
+		<div>
+            <h4>
+                우선 그림자를 드리우기 위한 기본 작업이 필요하다. 각각의 변수명은 절대적인 것이 아니다. 자신이 만든 변수 이름을 사용하면 된다.
+            </h4>
+            <p>
+                renderer에서 shadow의 사용을 활성화 해주는 코드
+            </p>
+            <p>
+                <code>renderer.shadowMap.enabled = true;</code>
+            </p>
+            <p>
+                그림자를 발생시키는 빛에 대해 castShadow를 활성화 시켜야 한다.
+            </p>
+            <p>
+                <code>light.castShadow = true;</code>
+            </p>
+            <p>
+                그림자를 발생시키는 물체에 대해 castShadow를 활성화 시켜야 한다.
+            </p>
+            <p>
+                <code>object.castShadow = true;</code>
+            </p>
+            <p>
+                발생한 그림자를 받아 표현될 물체에 대해 receiveShadow를 활성화 시켜야 한다.
+            </p>
+            <p>
+                <code>object.receiveShadow = true;</code>
+            </p>
+            <p>
+            </p>
+            <h4>
+                각각은 default값이 false이기 때문에 true로 값을 바꿔주어야 한다.
+            </h4>
+            <p>
+			<script src="js/three.js"></script>
+		    <canvas id="HelloCanvas"></canvas>
+			<script src="pointlightshadow2.js"></script>	
+            </p>
+            <p>
+                위의 렌더링에서는 광원의 위치만 변경하고 있다. 광원의 위치에 따라 그림자가 생성되는 것을 확인할 수 있다.
+                그런데 자세히 보면 빛이 중앙으로 올 때, 구체의 크기보다 그림자가 큰 것을 확인할 수 있다.
+                이것은 광원이 pointlight이기 때문이며, 물체와 광원과의 거리에 따라 그림자의 크기가 달라질 것이다.
+                한번 광원의 위치를 점차 구체로 부터 멀어지게 해볼까?
+            </p>
+            <p>
+			    <canvas id="HelloCanvas2"></canvas>
+			    <script src="pointlightshadow3.js"></script>	
+            </p>
+            <h2>
+                property 첫번째 : camera
+            </h2>
+            <p>
+                처음 렌더링 예제에서 perspective camera와 비슷한 것이 움직이는 것을 보지 않았는가?
+                그렇다. three.js에서 pointlight은 그림자를 드리울 떄 마치 perspective camera인 것 처럼 드리운다.
+                즉 near, far 값을 조정하여 그림자를 표현할 범위를 지정할 수 있다
+                중요한 것은 그림자다! 그림자를 표현할 범위이다.
+                그러면 near값을 키워 그림자를 없애보도록 하겠다.
+            </p>
+            <p>
+                <canvas id="HelloCanvas4"></canvas>
+			    <script src="pointlightshadow4.js"></script>	
+            </p>
+            <p>
+			    default값은 near : 0.5, far : 500 이다.
+            </p>
+            <p>
+                <code>light2.shadow.camera.near = 20;</code>
+            </p>
+            <p>
+                near를 뒷면 너머로 보냈더니 그림자가 드리워지지 않는다. 하지만 빛은 정상적으로 구체를 비치며, 명암이 형성된다.
+                코드에서도 추측할 수 있듯이 그림자에 대한 적용이다.
+            </p>
+            <p>
+                <code>const helper = new THREE.CameraHelper( light2.shadow.camera );
+                    scene2.add( helper );
+                </code>
+            </p>
+            <p>
+                이상의 코드를 적용시키면 그림자에 대한 perspective camera 를 띄울 수 있게된다.
+            </p>
+            <h2>
+                property 두번째 : mapSize
+            </h2>
+            <p>
+                렌더링된 그림자들의 테두리를 잘 보면 매끄럽지 않다는 것을 확인할 수 있다.
+                이 때 mapsize값을 수정시킴으로써 매끈한 상태, 혹은 더욱 매끄럽지 않은 상태를 만들 수 있다.
+                섬세할 수록 연산 속도는 느려지니 적절히 사용하도록 하자.
+            </p>
+            <p>
+			    default값은 width,height : 512 이다.
+            </p>
+            <p>
+                <code>light2.shadow.mapSize.width = </code>
+            </p>
+            <p>
+                <code>light2.shadow.mapSize.height = </code>
+            </p>
+            <h4>128</h4>
+            <p>
+                <canvas id="HelloCanvas5"></canvas>
+			    <script src="pointlightshadow5.js"></script>	
+            </p>           
+            <h4>1024</h4>
+            <p>
+                <canvas id="HelloCanvas6"></canvas>
+			    <script src="pointlightshadow6.js"></script>	
+            </p>     
+            <h2>
+                property 세번째 : radius
+            </h2>
+            <p>
+                그림자에 blur처리를 할 수 있게된다. blur처리를 통해 원래는 pointlight 특성상 그림자의 경계가 진하게, 뚜렷하게 나타나 어색한 느낌을 받기도 하는데,
+                그 느낌을 지워줄 수 있다.
+            </p>
+            <p>
+			    default값은 radius : 1이며, 1 이상의 값을 통해 작동한다.
+            </p>
+            <p>
+                <code>light2.shadow.radius = </code>
+            </p>
+            <h4>
+                20
+            </h4>
+            <p>
+                <canvas id="HelloCanvas7"></canvas>
+			    <script src="pointlightshadow7.js"></script>	
+            </p> 
+            <h4>
+                값을 키워주면 그림자를 통해 생동감을 줄 수 있다. 100으로 값을 바꿔보자 | 색깔은 열정의 색 빨강으로 바꿔보자 :)
+            </h4>
+            <p>
+                <canvas id="HelloCanvas8"></canvas>
+			    <script src="pointlightshadow8.js"></script>	
+            </p> 
+	</body>
+</html>