inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

떠먹는 Three.js

화면 출력 (애니메이션, 반응형)

화면 출력에서 이상해요

336

anyas1398

작성한 질문수 3

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코드도 첨부합니다

HTML/CSS javascript three.js

답변 2

0

제주코딩베이스캠프

안녕하세요 제주코딩베이스캠프입니다!
인프런 AI 인턴에서 올린 답변처럼 코드 내에 오타가 있어 올바르게 동작하지 않을 수 있습니다.

실행 페이지의 콘솔창을 확인하시면 다음과 같은 경고 메시지가 출력됩니다.

(F12 또는 화면 오른쪽 마우스→ 검사)image

// 렌더러의 크기
    renderer.setSize(window.innerWidth, widow.innerHeight);
// 수정된 코드
    renderer.setSize(window.innerWidth, window.innerHeight);

코드를 위와 같이 수정해주시면 올바르게 동작합니다.

 

0

인프런 AI 인턴

안녕하세요, 인프런 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님, 수정해 보시고 여전히 문제가 해결되지 않는다면 언제든지 질문해 주세요.

존재하지 않는 일기 url입력 시 alert이 두 번 떠요

0

13

1

useState 직접 구현 부분에서 질문이 있습니다.

1

20

1

학습을 하고 블로그에 정리를 해도 괜찮을까요?

1

23

1

교재(3쇄)와 강의 내용 문의

0

28

2

섹션2번 부분 강의 화면이 잘 못된것 같아서 문의합니다.

0

23

1

call stack 표현이 잘못표현된것이 아닌가요?

0

61

2

part3. spy 쪽 / part3,part4 강의자료

0

32

2

최종 코드

0

39

2

Open AI 결제

0

40

2

figma 파일을 받을 수가 없어요

0

48

1

React 와 Virtual DOM 의 이야기 영상 실행이 안됩니다.

0

34

1

다운로드 연결이 되지 않을 때는 어떻게 해야할까요?

0

37

1

Visual Studio Code 대신 Pycharm 써도 되나요?

0

42

2

커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?

0

56

1

맥북 듀얼모니터 사용 displaylink manager 사용시 화면이 안보입니다.

0

97

1

수업을 들으면서...

0

58

1

roughness이 안 먹혀요 ㅜ

0

135

1

camera.lookAt이 원래 이런건가요?

0

265

1

Github에서 deploy 하려면 따로 방법이 있나요?

0

329

2

WebGL 1 지원 중단에 대해

0

599

2

index.html 실행 시 CORS 문제

0

524

1

소스코드 공유는 없을까요?

1

483

1

강의 영상에서 보이는 색과 다른 색상이 나옵니다.

1

571

2

섹션2 Material 학습 중에 마우스 드래그로 돌려보는 기능?

2

507

2