클래식 VRML 기술을 현대적 Three.js 기술로 복원하기

과거 웹 상에서 3차원을 구현하기 위해서 VRML(Virtual Reality Modeling Language) 이라는 언어를 사용한 적이 있다.

원뿔을 구현한다고 생각해 보자.

 

아래와 같이 정의하면 웹브라우저의 플러그인 프로그램에서 해석하고 화면에 뿌려준다.

그러면 아래와 같은 모형이 그려지며 X, Y, Z 축 어느 방향으로도 네이게이션이 가능하고 카메라의 이동도 가능하기 때문에 Z축 즉 앞뒤로 깊이감을 줌으로써 3차원의 느낌을 준다. 

 

Cone {
    field SFFloat bottomRadius 1
    field SFFloat height       2
    field SFBool  side         TRUE
    field SFBool  bottom       TRUE
}

 

 

 

이 3D 모형을 직접 조작하려면 당시엔 자바기술이 사용됐다.

자바 애플릿을 만들어 통신을 하는 것이다. 

그러면 예를 들어, 로봇팔이면 그것을 직접 조작해 볼 수도 있다.

 

 

지금은 사장된 기술이다.

하지만 현대에는 Three.js 라는 기술로 이것을 복원할 수 있다.

 

기존에 VRML의 wrl 파일을 무료 3D 프로그램인 블렌더에서 import하고, 현대에 사용하는 glb 파일로 export하고 이 파일을 별도의 플러그인 프로그램없이도 Three.js를 이용해서 웹 상에서 3D 그대로 구현할 수 있다.

이러한 구현은 바이브코딩을 이용해서 만들었다.

 

그리고 자바 애플릿을 이용하지 않더라도 모델을 조작이 가능하다.

이것은 추후 업데이트 예정이다.

 

https://youtu.be/8Ir-nS3DLwk

 

 

 

해당 소스는 아래 깃허브에서 볼 수 있다.

 

GitHub - ethanjoh/3d_navigation · GitHub

GitHub - ethanjoh/3d_navigation