Skip to content
Snippets Groups Projects
Commit 35b8b254 authored by hngmo.kim's avatar hngmo.kim
Browse files

final? commit

parent 43a3f9b0
Branches
No related tags found
No related merge requests found
img/0.png 0 → 100644
img/0.png

30.7 KiB

<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>
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
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
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
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
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
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
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
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
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
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
<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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment