Reall3dViewer : 웹에서 3D 세상을 쉽게 보여주는 도구

 

요즘 웹사이트를 보면 단순히 글과 사진만 있는 게 아니라, 3D로 된 제품이나 공간을 직접 돌려보고 확대할 수 있는 경우가 많습니다. 예를 들어 부동산 사이트에서 아파트를 3D로 둘러본다거나, 쇼핑몰에서 가구를 여러 각도에서 확인할 수 있는 기능이 그렇습니다. 이런 것들 가운데 약간은 이름이 친숙한 Three.js와 node 기반으로 만들어진 것이 Reall3dViewer 입니다. 

 

그림 : Reall3dViewer 데모 기능의 한 장면

 

---

 

Reall3dViewer

 

1️⃣ 개요

Reall3dViewer는 웹에서 3D 장면을 보여주고 다룰 수 있도록 만든 뷰어(Viewer)입니다. 특히 최근 주목받는 Gaussian Splatting 기술을 사용해서, 기존보다 훨씬 더 자연스럽고 사실적인 장면을 표현할 수 있습니다. 쉽게 말해, 사진 수백 장을 모아 현실과 비슷한 3D 공간으로 재구성해주는 방식이라고 할 수 있죠.

 

 

2️⃣ 주요 특징

기능	설명
다양한 포맷 지원	.ply, .splat, .spx, .spz 등의 Gaussian splatting 관련한 3D 데이터 파일 형식을 지원
주석 및 측정 도구 (Annotation Tools)	단순히 보는 것에서 그치지 않고, 화면에 표시하거나 길이를 재볼 수 있는 마킹(marking), 치수 측정 기능을 내장하고 있음
워터마크 지원	콘텐츠 보호를 위해 텍스트 워터마크 기능을 제공
고급 렌더링	구형(spherical harmonics)의 1차부터 3차까지 지원하여 조명 및 색상 표현의 세밀한 조정 가능
지도 연동 (Map Integration)	지도를 배경으로 하거나 지도 위에 3D 모델을 배치해 렌더링할 수 있음
카메라 컨트롤	마우스를 이용한 회전(Orbit), 이동(Pan), 확대 및 축소(Zoom) 등 사용자 탐색을 위한 조작 제공
장면 모드 (Scene Modes)	작은 장면(small scenes)과 큰 장면(large scenes)을 모두 다룰 수 있는 구조
포인트 클라우드 모드	Gaussian splatting 렌더링과 비교 가능하도록 포인트 클라우드(point cloud) 모드로 전환 가능

 

그림 : 지도에 연동한 예시

 

 

 

3️⃣ 적용 가능한 영역

이 기술이 적용 가능한 영역은 다음과 같습니다. 

• 가상 투어 : 집, 건물, 박물관 같은 공간을 온라인에서 돌아볼 수 있게 할 때
• 제품 전시 : 온라인 쇼핑몰에서 제품을 입체적으로 보여주고 싶을 때
• 디지털 트윈 : 실제 공간을 3D로 재현해서 관리할 때
• 교육 콘텐츠 : 지구과학, 건축, 예술 같은 분야에서 실물과 비슷한 3D 자료를 보여줄 때

사실 응용에는 상상력의 제한만 있을 뿐이란 생각입니다. 활용할 수 있는 데이터만 있다면 정말 다양한 곳에 다양한 방식으로 적용할 수 있을 것 같거든요.

 

4️⃣ 설치 

 

준비할 것은 다음과 같습니다. 

• Node.js 와 npm을 설치합니다.
• Reall3dViewer 패키지를 설치합니다. 

npm install @reall3d/reall3dviewer

 

 

5️⃣ 사용 방식

Reall3dViewer는 다음의 두 가지 방식으로 쓸 수 있습니다.

• 내장 뷰어 사용 방식 : 간단히 DOM 요소(root)를 지정하고, 모델 URL을 불러와서 표시하도록 합니다.

<div id="myViewer" style="width: 800px; height: 600px;"></div>
<script type="module">
  import { Reall3dViewer } from "@reall3d/reall3dviewer";

  const viewer = new Reall3dViewer({ root: '#myViewer' });
  viewer.addModel('https://reall3d.com/demo-models/yz.spx');
</script>

 

• 맞춤형 방식 : 이미 Three.js 환경이 구축되어 있는 경우, SplatMesh를 직접 사용해 모델을 추가하고 더 세밀하게 원하는 방식으로 통합할 수 있습니다. 

import { SplatMesh } from "@reall3d/reall3dviewer";

// (Three.js renderer, scene, controls 등이 이미 설정돼 있다고 가정함)
const splatMesh = new SplatMesh({ renderer, scene, controls });
splatMesh.addModel({ url: 'https://example.com/model.spx' });
scene.add(splatMesh);

 

 

---

 

Reall3dViewer는 웹 개발자나 디자이너가 3D 장면을 손쉽게 보여줄 수 있게 도와주는 도구입니다. 단순히 예쁘게 보여주는 것뿐만 아니라 주석, 측정, 지도 연동, 워터마크 같은 실용적인 기능까지 갖춘 점이 큰 장점이죠.  앞으로 이를 이용한 활용처가 더 많이 나와서 사람들이 이를 '즐길 수' 있게 되면 좋겠습니다. ^^ 

 

---

 

참고자료

• 코드) Reall3dViewer github 저장소 (링크) 
• 코드) 샘플 npm 패키지를 이용한 예제 (링크) - 데모로 제공되는 화면들의 실제 코드입니다.
• 문서) Reall3dViewer 상세 문서 페이지 (링크) - 세부 기술 사항에 대한 설명이 가득합니다.