전체 글

조명, SpotLight_스포트라이트 효과_무대 조명이나 손전등과 같은 빛을 표현

" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 SpotLight특정 방향으로 원뿔 형태의 빛을 발산하는 광원이다.3D 씬에서 스포트라이트 효과를 내는 데 사용된다.이 빛은 특정 지점에 집중해 비추며, 시야 각과 감쇠를 설정해 효과를 세밀하게 조정할 수 있다.무대 조명이나 손전등과 같은 빛을 표현할 때 유용하다.  SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float ) 위치 (Position)빛이 발산되는 시작 지점이다.position.set(x, y, z)로 설정할 수 있다.  대상 (Target)빛이 향하는 지점을 설정할 ..

조명, PointLight _ 특정 지점에서 빛이 모든 방향으로 퍼져나가는 조명 효과_ 전구나 촛불 같은 광원을 표현

PointLight 특정 지점에서 빛이 모든 방향으로 퍼져나가는 조명 효과를 제공하는 광원이다.현실 세계의 전구나 촛불 같은 광원을 표현하는 데 사용된다.주요 속성으로는 위치, 강도, 색상, 그리고 거리와 감쇠 값이 있다.   PointLight( color : Integer, intensity :Float, distance :Number, decay : Float ) 위치 (Position)PointLight가 위치하는 지점을 나타낸다.빛이 해당 지점에서 시작해 사방으로 퍼져 나간다.  강도 (Intensity)빛의 세기를 조절하는 속성이다.값이 높을수록 더 밝은 빛을 제공한다.  색상 (Color)빛의 색을 설정할 수 있다.이를 통해 따뜻한 색감이나 차가운 색감의 조명을 표현할 수 있다.  거리 (D..

조명, 그림자(Shadow) 처리하기

그림자 추가 /* Renderer 만들기 : html에 캔버스 미리 만들기 */ const canvas = document.querySelector("#three-canvas"); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); // 그림자 설정 renderer.shadowMap.enabled = true; // renderer.shadowMap.type = THREE.PCFShadowMap;..

조명, Light 애니메이션

/* 그리기 */ const clock = new THREE.Clock(); function draw() { // 삼각함수 사용하여 반지름이 5인 원을 그리며 이동하기 const time = clock.getElapsedTime(); light.position.x = Math.cos(time) * 5; light.position.z = Math.sin(time) * 5; renderer.render(scene, camera); renderer.setAnimationLoop(draw); }  https://wam6577.tistory.com/158 시간 흐름 측정, getDelta()와 getElapsedTime()getDelta()와 getElapsedTime()주로..