인프런 커뮤니티 질문&답변
작성한 질문수
material 파트까지 들은 후 생긴 궁금증
작성
·
31
0
안녕하세요 선생님. material까지 강의를 들으면서 두 가지 궁금한 점이 생겼습니다.
로컬 서버에서 ctrl+s 하면 자동으로 핫로딩되어 코드 변경사항이 화면에 반영되는 것으로 알고 있습니다.
(리액트의 경우는 root부터 리렌더링)
그런데 핫로딩을 했을 때 바로 반영되는 코드가 있고, 직접 브라우저에서 새로고침해줘야 반영되는 코드가 있었습니다.
<핫로딩 시 안변함 (only 새로고침으로만 변경사항 반영됨)>
material wireframe 적용
camera fov, far 속성
그 외 등등
<핫로딩 시 변함>
Geometry 종류 변경
transform 속성 변경 (position, scale, rotation)
mesh color 변경
materal 종류 변경
그 외 등등
위와 같은 차이가 발생하는 이유를 잘 모르겠습니다. 내부 동작면에서 뭔가 다른게 있는 걸까요? (three.js 코드를 까보면 좀 명확해지려나요...)
Mesh의 정의를 어떻게 내려야할지 잘 모르겠습니다. 아래 두 가지 중 어느 쪽이 더 맞는 설명일까요?
Geometry와 material을 감싼 껍데기
Geometry와 material로 이루어진 하나의 물체
또, 종종 3D 모델링에서 정육면체, 삼각형 등을 오브젝트라고 부르는 걸 들은 적 있는 것 같은데, 해당 오브젝트라는 명칭이 맞는 명칭인가요? 그렇다면, Mesh = 오브젝트 라고 부를 수 있을까요?
감사합니다.
답변 1
1
안녕하세요. dbjoung님 질문주셔서 감사드립니다. ㅎㅎ
1.R3F의 three.js객체들 중에 React lifecycle과 독립적으로 동작하는 부분은 hot reload시에는 변경되지 않을 수 있습니다. 예를들어 useRef로 mesh, material, geometry를 직접 수정한경우 hot reload시에 반영되지 않을 수 있습니다. 그리고 useLoader, useGLTF, useTexture를 사용하는 부분도 메모리에 캐싱되기 때문에 변경 후 hot reload될때 변경되지 않을 수 있습니다.
그리고 말씀 주신것처럼 material wireframe 적용이나 camera fov, far 속성등은 material객체와 camera객체를 인스턴스화 해서 사용하기때문에 바로 적용되지 않습니다. 예전 three.js버젼에서는 자동으로 material같은 속성들을 자동으로 업데이트해줬는데, 최근 three.js버젼에서는 퍼포먼스 이슈로 자동으로 업데이트 하지 않고 명시적으로 업데이트 해야하는 경우도 있습니다. 실제 프로젝트에서도 원하는 타이밍에 업데이트하는 코드를 넣고는 합니다. 예를들어 material속성을 바꾸고 material.needsUpdate = true, camera속성을 바꾸고 camera.updateProjectionMatrix() 이런 코드를 명시적으로 추가해야합니다. three.js도 r3f도 버젼이 계속 갱신되고 있으니 또 개선될수도 있을 것 같습니다. 자세한 부분은 아래 부분을 살펴보시면 좋을것 같아요. https://inf.run/DQQHK
2. 이질문에 대한 제 생각은 b.Geometry와 material로 이루어진 하나의 물체가 좀더 맞는 표현인것 같습니다. 껍데기라고 함은 아무런 기능이 없겠지만 mesh는 geometry와 material이 합쳐진 하나의 어떤 실체가 있는 오브젝트이기 떄문입니다.
그리고 강의에서 반복적으로 설명드리는 내용인데요, object3D를 객체가 있습니다. scene, camera, mesh, group다 obejct3D입니다. 그래서 'mesh = 오브젝트' 라기 보다는 오브젝트가 좀 더 큰 개념이라고 생각하시면 좋을것 같습니다.
답이 되었는지 모르겠네요. 또 추가적인 궁금증이나 질문있으시면 남겨주세요 ㅎㅎ 감사합니다!