diff --git a/index.html b/index.html index f46c786e8e1a2e5ebdce5a00bc78254212043ca1..aa205fd80c719cfa15997d8dd9846ccf032d2bbb 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 0000000000000000000000000000000000000000..9b7577bf7eafa7165ac4d48cc6d00c05d97daed6 --- /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 0000000000000000000000000000000000000000..c50cb5ff53394c6cd35697c183719717573d20ce --- /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 0000000000000000000000000000000000000000..1faebf4c08ced88fb69ad3749f22c15672a491c7 --- /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 0000000000000000000000000000000000000000..97a317d44bbc260ac85a3907fe5e85dce2e85545 --- /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 0000000000000000000000000000000000000000..f665704952bf9f0113e1b044e990edbae7d4536f --- /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 0000000000000000000000000000000000000000..f0e9735beb44c7825dc3e666cf97ec6ab17cbb3f --- /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 0000000000000000000000000000000000000000..b5079e62c4aaebe9e1c8ae337446bada6790e39c --- /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 0000000000000000000000000000000000000000..918af98b9b428af8d37497ebab695dc7f92780ae --- /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 0000000000000000000000000000000000000000..8a746e879d091d1f423d5ce495f5cd475e2b4d7a --- /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 0000000000000000000000000000000000000000..d798c8a44c210a1834aebc4984fc960fcdf898a4 --- /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 1d2e1e4ba27d6e357f9eb503002342d1c09fb2dd..322fc3fb2f10e00668b015a83c2d2694afbb25e5 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>