Implementation of Augmented Reality Website Using Three.js and React

Three JS와 React를 이용한 증강현실 웹사이트 구현

According to the 2021 Mobile Augmented Reality Market Report by Korea Innovation Foundation, the augmented reality market has been growing recently due to the growth of the mobile augmented reality market along with the development of smartphones. In order to provide augmented reality services to mobile users, it is necessary to create native apps for each device. However, there are problems such as maintenance costs for multi-platform and low accessibility due to app download. Recently, the construction of augmented reality system in a web-based environment by using the WebXR Device API is in progress, but it is judged that the system using the WebXR Device API is still in the research stage. In this paper, a responsive multi-platform environment was built using the WebXR Device API, Three JS, and React, and a function to provide augmented reality service to mobile and web users was implemented. As a result of the experiment, it was confirmed that the interlocking of augmented reality was successfully implemented in a responsive web environment, and look forward to the augmented reality service operating on the web in the future.

연구개발특구진흥재단의 2021년 모바일 증강현실 시장 보고서에 따르면 스마트폰의 발전과 더불어 모바일 증강현실 시장의 성장으로 인해 최근 증강 현실 시장이 성장하고 있다. 증강현실 서비스를 모바일 사용자에게 제공하기 위해서는 기기별 네이티브 앱을 제작해야 한다. 하지만 이에는 멀티 플랫폼 대응에 소비되는 유지보수 비용과 앱 다운로드로 인한 낮은 접근성 등의 문제점이 존재한다. 최근에는 WebXR Device API를 활용하여 웹 환경에서 증강현실 시스템을 구축이 진행되는 추세이나, WebXR Device API를 사용한 시스템은 아직 연구단계에 있다고 판단된다. 본 논문에서는 WebXR Device API, Three JS, React를 이용하여 반응형 멀티 플랫폼 환경을 구축하여, 모바일 및 웹 사용자에게 증강현실 서비스를 제공하는 기능을 구현하였다. 실험 결과 반응형 웹 환경에서 증강현실의 연동을 성공적으로 구현되었음을 확인하였으며, 향후 웹 기반에서 동작되는 증강현실 서비스를 기대해본다.