초기화 되는 이유 : gsap타임라인을 사용하지 않고 여러개의 독립적인 애니메이션을 연속적으로 실행하려면, 각 애니메이션의 시작 값이 이전 애니메이션의 종료 값과 일치해야한다. 그렇지 않으면 애니메이션 간에 불연속성이 발생한다. 해결하는 방법 GSAP 타임라인 사용: 타임라인을 사용하면 여러 애니메이션을 서로 연결할 수 있으며, 각 애니메이션의 시작과 종료를 정확히 제어할 수 있습니다. 이로 인해 간단하게 순차적인 애니메이션을 구현할 수 있습니다. 위치와 회전 값 저장: 애니메이션의 종료 시점에서 위치와 회전 값을 저장하고, 다음 애니메이션의 시작 값으로 사용할 수 있습니다. 이렇게 하려면 애니메이션의 종료 시점을 감지하고 해당 값을 수동으로 설정해야 할 수도 있습니다. 콜백 함수 사용: GSAP에서는 ..

dom트리 : 웹 문서 안에 있는 요소들간의 부모 자식 관계를 계층구조로 나타낸 것 각각의 요소들을 node라고함 요소노드의 속성노드는 자식노드이다 getElementById() getElementsByClassName() > 반환 값이 2개 이상일 수 있음 getElementsByTagName() > 반환 값이 2개 이상일 수 있음 querySelector(”#ID”) / querySelector(”.ClassName”) / querySelector(”p”) .addEventListener(’동작’,함수(이벤트 타겟)); queryselector(선택자) 한 개의 값을 반환함 / 반환 값이 여러 개일 경우 제일 처음 요소를 선택함(ex.class) queryselectorAll(선택자 또는 태그) 반환..

cos, sin함수를 사용해서 x, z 좌표를 설정하는 이유 card.position.x = 1 * Math.cos(angle); card.position.z = 1 * Math.sin(angle); 원의 중심을 기준으로 일정 각도만큼 거리가 떨어져 있기 때문이다. 각도가 중요하지 않고 거리만 사용할거면 그냥 상수 써도 되는데 45도씩 증가 + 이동하면서 카드가 배치되어 있기 때문에 cos, sin 함수를 이용한다 card.position.y = 1 * Math.tan(angle); position y값을 설정할 때에는 tan를 사용한다 오답노트 이번 모델링에게 각도를 부여했는데 원하는대로 되지 않았음. 카드가 모두 앞면을 바라보게 설정되어있었는데, 시계바늘처럼 배치하고 싶은 경우 각각의 카드에 다른 값..

Performance Optimization (성능 최적화) Geometry Merging: 여러 개의 작은 지오메트리 대신 하나의 큰 지오메트리로 병합함으로써 draw call을 줄일 수 있습니다. LOD (Level of Detail): 카메라에서 멀리 떨어진 객체는 상세 수준을 줄여 렌더링합니다. Three.js는 이를 위한 THREE.LOD 클래스를 제공합니다. Culling: 화면 밖의 객체는 렌더링하지 않습니다. 이는 Three.js가 자동으로 수행하지만, 추가적인 제어가 필요한 경우 직접 구현할 수도 있습니다. Texture & Material Optimization: 불필요하게 큰 텍스처나 복잡한 재질을 사용하면 성능에 영향을 줄 수 있습니다. 텍스처 크기를 적절하게 조절하고 필요한 경우 ..