Light

Light

  • AmbientLight -> ์ฃผ๋ณ€๊ด‘, intensity๋ฅผ ๋‚ฎ์ถ”์–ด ์˜ค๋ธŒ์ ํŠธ์˜ ํ˜•ํƒœ๋งŒ ๋ณด์ด๊ฒŒ ํ‘œํ˜„ํ•  ๋•Œ ์ž์ฃผ ์‚ฌ์šฉ๋œ๋‹ค.

  • HemisphereLight -> ์ฃผ๋ณ€๊ด‘, ๋ฐ˜์›์„ ์ค‘์‹ฌ์œผ๋กœ ์ƒํ•˜์—์„œ ๋น„์ถ”๋Š” ๋น›์˜ ๋‘ ๊ฐ€์ง€ ์ƒ‰์ƒ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • DirectionalLight -> ๋ฐฉํ–ฅ์„ฑ์„ ๊ฐ€์ง„ ๋น› (ex: ํ–‡๋น›)

  • PointLight -> ๋ฐฉํ–ฅ์—†์ด ์‚ฌ๋ฐฉ์œผ๋กœ ํผ์ง€๋Š” ๋น› (ex: ๋ฐฑ์—ด๋“ฑ)

  • SpotLight -> ํ•œ๊ณณ์œผ๋กœ ์ง‘์ค‘๋œ ๋น› (ex: ๋ฌด๋Œ€ ์กฐ๋ช…)

Properties

  • color: ๋น›์˜ ์ƒ‰์ƒ

  • intensity: ๋น›์˜ ๊ฐ•๋„

  • target: ์˜ค๋ธŒ์ ํŠธ ๋Œ€์ƒ์˜ ํฌ์ง€์…˜๊ฐ’์œผ๋กœ, light์˜ position์„ ๊ธฐ์ค€์œผ๋กœ target์˜ position๊ฐ’์„ ๊ณ„์‚ฐํ•˜์—ฌ Light์˜ ๊ฐ๋„(rotate)๋ฅผ ์žฌ๊ณ„์‚ฐํ•œ๋‹ค. (default: 0,0,0)

  • distance: ๋น›์˜ ๊ฑฐ๋ฆฌ

  • penumbra: [spotlight] ๋น›์˜ ๊ฐ์‡ ์œจ ์กฐ์ ˆ

Shadow

  • castShadow: Mesh์— ์ž์‹ ์˜ ๊ทธ๋ฆผ์ž ์ƒ์„ฑ ์—ฌ๋ถ€

  • recieveShadow: ์ž์‹  ๋˜๋Š” ๋‹ค๋ฅธ Mesh์— ์˜ํ•ด ์ƒ์„ฑ๋œ ๊ทธ๋ฆผ์ž์— ์˜ํ–ฅ์„ ๋ฐ›๋Š”์ง€ ์—ฌ๋ถ€

  • shadowMapSize: shadowMap์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜์—ฌ ๊ทธ๋ฆผ์ž ํ•ด์ƒ๋„ ์กฐ์ ˆ, shadow๋„ texture์ฒ˜๋Ÿผ ๋ Œ๋”๋ง๋จ

SpotLgith

ํŠน์ • ๋ฐฉํ–ฅ์œผ๋กœ ์ง‘์ค‘๋œ ๋น›์„ ๋ฐฉ์ถœํ•˜๋Š” ์กฐ๋ช…, ๋น›์ด ๋ฉ€์–ด์งˆ์ˆ˜๋ก ํฌ๊ธฐ๊ฐ€ ์ปค์ง€๋Š” ์›๋ฟ”์„ ๋”ฐ๋ผ ๋ฐฉ์ถœ๋œ๋‹ค.

const spotLight = new THREE.SpotLight(
  0xffffff, // color(์ƒ‰์ƒ)
  2.5, // intensity(๊ฐ๋„)
  30, // distance(๋น›์ด ๋‹ฟ๋Š” ๊ฑฐ๋ฆฌ)
  Math.PI * 0.15, // angle(๋น›์ด ํผ์ง€๋Š” ๊ฐ๋„)
  0.2, // penumbra(๋น›์ด ๊ฐ์‡ ํ•˜๋Š” ์ •๋„)
  0.5 // decay(๊ฑฐ๋ฆฌ์— ๋”ฐ๋ผ ์–ด๋‘์›Œ์ง€๋Š” ์–‘)
);
spotLight.position.set(0, 0, 3);
scene.add(spotLight);

Target

  • spotLight๋Š” ๋น›์„ ์–ด๋–ค ํƒ€๊ฒŸ์„ ํ–ฅํ•ด ๋ฐฉ์ถœ ํ• ์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ์›์ ์„ ํ–ฅํ•ด ๋ฐฉ์ถœ๋œ๋‹ค.

spotLight.position.set(0, 0, 3);
spotLight.target.position.set(0, 0, 3);

scene.add(spotLight, spotLight.target);

Texture

  • ๋น›์˜ ์ƒ‰์ƒ์„ ์กฐ์ ˆํ•˜๊ธฐ ์œ„ํ•œ ์šฉ๋„๋กœ texture๋ฅผ ์ž…ํž ์ˆ˜ ์žˆ๋‹ค.

  • ๊ด‘์›์— ์ž…ํžˆ๋Š” ํ…์Šค์ณ๋Š” ์ƒ‰์•ˆ๊ฒฝ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๊ฐ–๋Š”๋‹ค.

  • ๋น›์ด ํ…์Šค์ณ๋ฅผ ํˆฌ๊ณผํ•˜๋ฉด์„œ ํ…์Šค์ณ์˜ ์ƒ‰์ƒ์ด ์ž…ํ˜€์ง€๋Š” ๊ฒƒ์œผ๋กœ ์ดํ•ดํ•˜์ž.

const textureLoader = new THREE.TextureLoader().setPath('./assets/textures/');
const lightTexture = textureLoader.load('gradient.jpg');
spotLight.map = lightTexture;

Last updated