작성
·
171
1
화면 출력 부분 강의에서
window.addEventListener('resize', () => {
// 카메라의 종횡비
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// 렌더러의 크기
renderer.setSize(window.innerWidth, widow.innerHeight);
});
이 코드에서 창 크기를 바꿀시 box의 크기가 줄어드는 것이 아닌 box가 늘어나는 현상이 발생합니다 별의 별짓을 다해도 못고칠것 같아서 질문드려요
<canvas id="result" style="border:1px solid red; width: 100%; height: 100vh"></canvas>
혹시몰라 html코드도 첨부합니다
답변 2
0
안녕하세요 제주코딩베이스캠프입니다!
인프런 AI 인턴에서 올린 답변처럼 코드 내에 오타가 있어 올바르게 동작하지 않을 수 있습니다.
실행 페이지의 콘솔창을 확인하시면 다음과 같은 경고 메시지가 출력됩니다.
(F12 또는 화면 오른쪽 마우스→ 검사)
// 렌더러의 크기
renderer.setSize(window.innerWidth, widow.innerHeight);
// 수정된 코드
renderer.setSize(window.innerWidth, window.innerHeight);
코드를 위와 같이 수정해주시면 올바르게 동작합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
질문하신 코드에서 window.addEventListener
부분을 확인해 보았습니다. 코드 내 renderer.setSize(window.innerWidth, widow.innerHeight);
부분에서 오타가 발견되었습니다. widow.innerHeight
가 아닌 window.innerHeight
로 수정해야 합니다. 정정된 코드는 다음과 같습니다:
window.addEventListener('resize', () => {
// 카메라의 종횡비
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// 렌더러의 크기
renderer.setSize(window.innerWidth, window.innerHeight);
});
이렇게 수정하면 창 크기를 조절할 때 box의 비율이 올바르게 조절되어야 합니다.
anyas1398님, 수정해 보시고 여전히 문제가 해결되지 않는다면 언제든지 질문해 주세요.