setAnimationLoop 위치가...
99
投稿した質問数 1
현재 애니메이션 기본 수업부터 scale까지 봤는데,
setAnimationLoop 가 draw 안에 등록되서 매번 반복으로 실행되는것 같은데,
화면갱신에 관련된 render만 반복시키고
setAnimationLoop는 바깥에서 한번만 등록하는게 옳은 방법이 아닌가 하고 의문이 드는데 어떤게 맞는건가요?
동작은 둘다 똑같이 되긴 합니다.
const draw = () => {
/*
메쉬 애니메이션 처리 코드 들어갈 위치
...
*/
renderer.render(scene, camera);
}
renderer.setAnimationLoop(draw);回答 1
0
안녕하세요, 인프런 AI 인턴입니다.
aska120님께서 질문하신 부분에 대해 설명드리겠습니다. setAnimationLoop는 WebGL 기반 애플리케이션에서 매우 중요한 함수로, 주로 애니메이션을 매 프레임마다 업데이트하기 위해 사용됩니다.
renderer.setAnimationLoop(draw);를 사용하면, draw 함수가 매 프레임마다 호출되면서 화면 갱신과 애니메이션 처리가 일어나게 됩니다. 이 방식은 애니메이션 루프를 WebGL API가 적절히 관리하도록 해서 효율성을 높입니다. 이를 이용하면 브라우저가 최적화된 방식으로 빈도 조절(ex. 탭이 비활성화된 경우 프레임을 멈춤)할 수 있게 해주므로 보다 동적이고 부드러운 사용자 경험을 제공할 수 있습니다.
왜 setAnimationLoop를 draw 바깥에서 설정하나요?
- 최적화된 루프 관리: WebGL 자체가 제어하는 업데이트 루프를 활용합니다.
- 관리용이: 하나의 장소에서 애니메이션 루프를 시작해, 코드의 흐름을 쉽게 파악할 수 있습니다.
setAnimationLoop가 draw 함수 내부에 존재할 필요는 없습니다. setAnimationLoop는 기본적으로 한 번만 호출하여 루프를 설정하는 것이 일반적입니다. 해당 루프 내부에서 렌더링을 반복적으로 호출하여, 애니메이션이나 화면 갱신을 처리합니다.
이런 방식은 애니메이션 최적화와, 시스템 자원을 효율적으로 사용하기에 유리합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
box3.position.x 위치
0
38
1
리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?
0
81
1
소스코드 파일이 강의랑 같나요?
0
119
2
materials 배열에 있는 top, bottom ... 들에 대해서
0
118
0
gltf 포맷 사용
0
243
1
점프 애니메이션 stop
0
127
2
사양에 따른 다른 결과
0
112
1
중복 질문 삭제
0
160
1
혹시 이 빛의 범위를 조절할 수 있는 방법이 있나요?
0
124
1
gltf.scene.children 이 없는데도 모델이 화면에 떠요
0
101
2
GLF파일 export한 후에 three.js에서 렌더링 된 모델에는 텍스처 적용이 안되어있습니다..!
0
160
1
일반 유리, 강화 유리 강의에서 Glass 객체의 position X를 -1, 1로 설정한 이유를 모르겠어요
0
77
0
그림자가 다르게 표현됩니다
0
138
1
얼굴 그릴 때 붓이 깔끔하게 칠해지지 않고 얼룩덜룩해요
0
135
1
블렌더 texture paint 시 미러모드
0
164
0
DragControls의 인자값을 바꾸지 않았는데 에러가 안떠요!
0
104
1
blender 에서 색칠하기 편 Texter paint slot추가없음
0
966
2
fin 버전도 그냥 실행이 안돼요
0
289
2
자바스크립트 실행이 안되는 것 같아요
0
380
1
모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?
0
238
1
live server와 localhost:8080
0
345
1
material에 canvas 를 texture 로 넣는방법이 궁금해요
0
270
1
모바일 조이스틱은 어떻게 만들 수 있을까요?
0
208
1
징검다리 예제에서 SpotLight가 동작 오류
0
303
2