inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Three.js로 1인칭 3D 웹사이트 만들기

물리 객체의 움직임 구현

desk 가 밑으로 떨어졌을 때, "y 값이 문자열"에 대한 내용입니다.

103

김찬기

작성한 질문수 3

0

우선 원인은...

MeshObject 클래스 속성 중 differenceY 의 값에 OR 연산자를 사용., main.js 에서 ground 변수에 '0' 문자열 값을 할당해서 그런데요.

ground 는 y 속성값을 할당하지 않았기 때문에 MeshObject 클래스에서 info.y 는 undefined 이고, this.y 는 "this.height / 2 + this.differenceY" 의 계산이 적용되서 " 0.1 / 2 + '0' " 즉, 문자열 '0.20' 이 출력됩니다.

산술 연산자 '+' 가 들어가게되면, 그 계산식의 결과값은 반드시 문자열이 나옵니다.

x, y, z, differenceY 는 모두 좌표와 연관된 값으로, 모두 숫자 데이터 타입을 할당받아야 하는 일관성이 필요한데 ground, floor 에서만 differenceY 가 문자열을 받아 발생한 이슈입니다.

강의를 들어보던 중 강사님께서 처음에 숫자 0 을 사용하셨고, this.differenceY 속성에 값을 할당할때 OR 연산자를 쓰심으로인해 숫자 0 이 null/undefined 로 인식되는 것 때문에 문자열로 바꾸신거 같더라구요.

조금 더 정확하게 하자면, OR 연산자가 아닌 ?? 연산자를 사용해 숫자 0을 값 그대로 사용할 수 있도록 바꾸고 ground 에도 문자열 '0' 이 아닌 숫자 0 을 넣어주면 될것같습니다.

x, y, z 에 곱하기 1을 하는 추가코드는 필요없어집니다.

 

javascript 인터랙티브-웹 포트폴리오 three.js 3d

답변 0

PPT 코드 관련 질문

0

8

1

state 객체로 묶기

0

22

1

모델링1 14:9

0

13

1

프로젝트 영역 질문

0

24

2

몽고 db 접속 오류

0

20

1

주니어 이력서 작성방법

0

50

3

Json 플러그인 사용시 variable collection 없음

0

33

2

배리어블 목록 없음

0

34

3

Token 등록 방법 문의

0

26

1

3강 질문

0

43

2

74. 데이터 캐시 - 1 (이론) 강의 영상 누락

0

36

1

2강 nodejs 3단계 설명 질문

0

48

1

imagesLoaded에 관한 질문

0

22

2

useEffect와 lifecycle문의

0

38

2

프론트엔드 학습 수준 문의

0

50

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

55

2

계단이 안내려가요

0

38

2

최근 코테, 과제 테스트 트렌드

0

83

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

44

2

lucide react 아이콘 설치

0

49

2

17강 zustand store 서버에서 생성

1

50

1

문의관련 문의

0

54

2

개발자도구에서 모바일 버전으로 테스트할때

0

207

1

반발력을 0으로 해도 계속 튕겨져나갑니다..ㅜ

0

311

2