공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
작년에 3D 인터렉티브 웹 개발에 대한 내용으로 한국메타버스산업협회를 통해 교육을 진행했고, 올해도 교육을 진행합니다. 작년에는 바닐라 JS로 three.js 라이브러리를 살펴보았다면, 이번에는 React로 three.js를, 정확히는 React three fiber 라이브러리(R3F)를 살펴보는 내용으로 구성됩니다. R3F는 더 적은 코드로 더 높은 품질의 3D 웹 페이지를 개발할 수 있습니다. 교육기간의 경우 작년에는 3일간이였지만 이번에는 4일간의 교육으로 진행하며, 마지막 날에 실습을 통해 만들 코드 결과는 다음과 같습니다.
교육에 대한 참여 신청은 아래의 교육 소개 이미지를 클릭하시면 됩니다.
Blender의 Geometry Node 기능을 이용해 몇가지 건물 모델을 자동으로 배치한 결과를 렌더링한 이미지입니다.
블렌더로 뉴튼 진자를 모델링한 결과입니다. 예전에 뉴튼 진자의 움직임에 매료되어 구매각으로 검색해 보려고 했으나 이름을 몰라 검색조차 못했는데 지금 다시 검색해보니.. 가격이 상당하군요. 모델링한 결과로 대리만족하고 구매는 패스~!
형태가 간단하고 규칙적이라 모델링 자체는 어렵지 않습니다.
원래 목표로 했던 진자의 움직임입니다.
웹브라우저의 기능 중 Ctrl + Plus나 Ctrl + Minus를 누르면 화면이 커지거나 작아집니다. 즉 화면의 확대, 축소 기능인데요. 이 Zoom 값을 얻는 JS 코드입니다.
const zoom = (window.outerWidth / window.innerWidth);
위의 zoom 값은 비율이고 % 값을 원한다면 100을 곱해주면 됩니다. 마우스로 어떤 UI를 드래그 해서 이동 시킬때 꼭 반영해 줘야 할 Zoom 값입니다.