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>