워터폴 - 개발

이전 글 보기 (더보기 클릭) 더보기 [JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자! [JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자! 구글에서 제공하는 라이브러리인 model-viewer를 사용해서 web에 3D 모델을 띄우고, AR까지 적용시켜봅시다! 문서가 많이 없더라고요.. 조금은 간결하게 다룰 예정이라 더 자세한 내용은 공식문서 보 waterpole.tistory.com [JS] model-viewer 사용법 2 - model animation 추가하기 (with. modal 닫기) [JS] model-viewer 사용법 2 - model animation 추가하기 (with. modal 닫기) 이전 글 보기 (더보기 클릭) 더보기 [JS]..

이전 글 보기 (더보기 클릭) 더보기 [JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자! JS - web에 3D 모델을 띄우자! with. AR (model-viewer 사용법 1) 구글에서 제공하는 라이브러리인 model-viewer를 사용해서 web에 3D 모델을 띄우고, AR까지 적용시켜봅시다! 문서가 많이 없더라고요.. 조금은 간결하게 다룰 예정이라 더 자세한 내용은 공식문서 보 waterpole.tistory.com [JS] model-viewer 사용법 2 - model animation 추가하기 (with. modal 닫기) JS - web에 3D 모델을 띄우자! with. AR (model-viewer 사용법 2) 2022.09.13 - [개발/js] - JS - ..

이전 글 보기 (더보기 클릭) 더보기 [JS] model-viewer 사용법 1 - web에 3D 모델을 띄우자! JS - web에 3D 모델을 띄우자! with. AR (model-viewer 사용법 1) 구글에서 제공하는 라이브러리인 model-viewer를 사용해서 web에 3D 모델을 띄우고, AR까지 적용시켜봅시다! 문서가 많이 없더라고요.. 조금은 간결하게 다룰 예정이라 더 자세한 내용은 공식문서 보 waterpole.tistory.com 저번 포스팅에 이어서 이번에는 3D model에 animation이 존재하는 경우 animation을 추가해보겠습니다. 로드 시 애니메이션 체크 저번 포스팅에서 progress 이벤트를 통해 로드가 완료되었을 때 카메라 궤도 재설정을 했었습니다. 이번에는 l..

구글에서 제공하는 라이브러리인 model-viewer를 사용해서 web에 3D 모델을 띄우고, AR까지 적용시켜봅시다! 문서가 많이 없더라고요.. 조금은 간결하게 다룰 예정이라 더 자세한 내용은 공식문서 보시면 됩니다. 쉽게 적혀있어요 설치 glitch 같은 방법도 있지만 npm 혹은 cdn을 이용해서 설치를 진행하겠습니다. // npm npm install @google/model-viewer // cdn 모델 띄우기 지원되는 3D 모델은 glTF/GLB 파일입니다. src 3D 모델 glTF/GLB 파일 camera-controls 마우스/터치로 제어가 가능해집니다. 사실상 필수 기본값입니다. 저는 우선 위 3가지만 설정해주도록 하겠습니다. 모달로 띄우기 자 우선 여기까지만 해도 web에 3D 모델이..