“인터렉티브 3D 웹 개발”에 대한 오프라인교육 소개

작년에 3D 인터렉티브 웹 개발에 대한 내용으로 한국메타버스산업협회를 통해 교육을 진행했고, 올해도 교육을 진행합니다. 작년에는 바닐라 JS로 three.js 라이브러리를 살펴보았다면, 이번에는 React로 three.js를, 정확히는 React three fiber 라이브러리(R3F)를 살펴보는 내용으로 구성됩니다. R3F는 더 적은 코드로 더 높은 품질의 3D 웹 페이지를 개발할 수 있습니다. 교육기간의 경우 작년에는 3일간이였지만 이번에는 4일간의 교육으로 진행하며, 마지막 날에 실습을 통해 만들 코드 결과는 다음과 같습니다.

교육에 대한 참여 신청은 아래의 교육 소개 이미지를 클릭하시면 됩니다.

웹브라우저의 Zoom 값 얻기

웹브라우저의 기능 중 Ctrl + Plus나 Ctrl + Minus를 누르면 화면이 커지거나 작아집니다. 즉 화면의 확대, 축소 기능인데요. 이 Zoom 값을 얻는 JS 코드입니다.

const zoom = (window.outerWidth / window.innerWidth);

위의 zoom 값은 비율이고 % 값을 원한다면 100을 곱해주면 됩니다. 마우스로 어떤 UI를 드래그 해서 이동 시킬때 꼭 반영해 줘야 할 Zoom 값입니다.