From d34fc529ac7beeda8a5f3369e2d200502cd22750 Mon Sep 17 00:00:00 2001
From: "hngmo.kim" <hngmo.kim@gmail.com>
Date: Sun, 26 Jun 2022 23:23:58 +0900
Subject: [PATCH] final? commit
---
index.html | 4 +-
script.js | 25 +++++++++++++
script1.js | 82 +++++++++++++++++++++++++++++++++++++++++
script2.js | 74 +++++++++++++++++++++++++++++++++++++
script3.js | 68 ++++++++++++++++++++++++++++++++++
script4.js | 74 +++++++++++++++++++++++++++++++++++++
script5.js | 54 +++++++++++++++++++++++++++
script6.js | 54 +++++++++++++++++++++++++++
script7.js | 55 +++++++++++++++++++++++++++
script8.js | 55 +++++++++++++++++++++++++++
script9.js | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++
second.html | 18 ++++-----
12 files changed, 656 insertions(+), 11 deletions(-)
create mode 100644 script.js
create mode 100644 script1.js
create mode 100644 script2.js
create mode 100644 script3.js
create mode 100644 script4.js
create mode 100644 script5.js
create mode 100644 script6.js
create mode 100644 script7.js
create mode 100644 script8.js
create mode 100644 script9.js
diff --git a/index.html b/index.html
index f46c786..aa205fd 100644
--- a/index.html
+++ b/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개의 물체를 두었을 때 이다.
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9b7577b
--- /dev/null
+++ b/script.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/script1.js b/script1.js
new file mode 100644
index 0000000..c50cb5f
--- /dev/null
+++ b/script1.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/script2.js b/script2.js
new file mode 100644
index 0000000..1faebf4
--- /dev/null
+++ b/script2.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/script3.js b/script3.js
new file mode 100644
index 0000000..97a317d
--- /dev/null
+++ b/script3.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/script4.js b/script4.js
new file mode 100644
index 0000000..f665704
--- /dev/null
+++ b/script4.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/script5.js b/script5.js
new file mode 100644
index 0000000..f0e9735
--- /dev/null
+++ b/script5.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/script6.js b/script6.js
new file mode 100644
index 0000000..b5079e6
--- /dev/null
+++ b/script6.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/script7.js b/script7.js
new file mode 100644
index 0000000..918af98
--- /dev/null
+++ b/script7.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/script8.js b/script8.js
new file mode 100644
index 0000000..8a746e8
--- /dev/null
+++ b/script8.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/script9.js b/script9.js
new file mode 100644
index 0000000..d798c8a
--- /dev/null
+++ b/script9.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
index 1d2e1e4..322fc3f 100644
--- a/second.html
+++ b/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>
--
GitLab