728x90 Web Development/ThreeJS3 [Three.js / Javascript] OBJ 파일 로드 후 오브젝트 원점 이동 구현(feat. 오브젝트 사이즈 구하기, 부모/자식 요소 분리) Three.js를 프로젝트에 적용하는 이유로는 직접 메쉬를 만들어서 구현하려는 이유도 있겠지만, Blender나 여러 가지 툴을 통해서 생성된 파일을 로드해 3D 모델로 보여주는 이유도 클 것이다. (개인적으로는 후자의 예가 더 많을 것이라 생각한다) 그러나 파일을 로드해보면 파일에 따라 기준점이 제각각이다. 이런 경우에는 카메라의 위치나 모델의 위치 등에 의해 화면에 출력되는 시점도 제각각이 되는데, 여러 가지 기능을 구현하려다보면 이 문제가 항상 걸림돌이 된다. 그렇기 때문에 나는 이를 해결하기 위해, 오브젝트를 로드할 때 원점으로 이동시키는 기능을 구현하고자 했다. 하지만, 구글링을 통해 많은 정보를 찾아보아도 제대로 된 정보를 얻을 수가 없었다. 그렇게 며칠간 고생한 끝에 다행히도 stackove.. 2022. 6. 13. [Three.js / Javascript] TextGeometry 글자 사이즈 변경(update)하기(feat. dat-gui) Three.js로 프로젝트를 진행하는 도중, 텍스트를 출력해야하는 일이 생겼다. 텍스트 출력 자체는 Three.js 의 example이나 레퍼런스들이 꽤 있어서 구현하기가 어렵지 않았는데, 폰트 크기를 사용자가 조절할 수 있도록 UI 기능으로 제공하려고 하니 관련 기능을 찾기가 쉽지 않았다. 우선 시도해본 것은 TextGeometry의 size 속성값을 찾아 변경해보는 것이었는데, 콘솔로 찍어 발견한 geometry.parameters.parameters.size 속성 값을 변경해보았지만, 값이 변하더라도 크기가 변하는 그런 쉬운 일은 일어나지 않았다. 구글링을 해보고 별 짓을 다 해보았지만, TextGeometry의 size를 update 시켜 줄 기존 기능이나 방안은 없어보였다... 구글링으로 나온 .. 2022. 6. 13. [Three.js / Javascript] ThreeJS 카메라 키보드 이동 구현하기(직접 구현) Three.js는 WebGL을 이용한다. 예전에 Direct 3D를 배웠기 때문에 OpenGL 사용 경험이 있는데, 그래서 그런지 친숙했다. 하지만 삼각함수, 보간 등 여러 가지 수학적 이론이나 계산이 어려워서 힘들었는데 ThreeJS도 기본 구현된 것에 커스텀으로 무언가 기능을 만들어 쓸려니 쉽지만은 않았다. 결국 프로젝트에 쓰기 위해, 카메라 이동을 처리하는 과정에서 머리가 복잡해지기 시작했다... ThreeJS는 편의상 여러가지 화면 컨트롤을 제공한다. 흔히 사용하는 OrbitControl도 있지만 TrackballControl, FirstPersonControl, FlyControl, PointerLockControl 등이 제공된다. 이 중에서 FlyControl이나 PointerLockContr.. 2022. 6. 8. 이전 1 다음 반응형
