Three.js 11편 웹에서 3D Text작성하기

즐거운 Three.js 11편 

-웹에서 3D Text작성하기- 

Canvas가 발전한 이후, 웹의 그림에 Text를 집어넣는 일은 아주 쉬워졌다. 하지만 3D 지오메트리를 Text로 변환해서 넣는 일은 쉽지 않다. 만일 three.js API를 이용하지 않고 Text를 3D로 만든다면? 들어가는 Vertices와 Face 그리고 좌표축만 생각해도 벌써 잠이 온다. 

``new THREE.TextGeometry( )``

우리의 희망 Three.js.  three.js를 이용하면, Web에서 Text를 손쉽게 3D로 만들 수 있다. 문제는 font다. 한글 폰트같은 경우 용량이 너무 크다. 티스토리 태그로 한글 폰트를 3D로 올리면, 코드가 20만줄;정도 된다. 폰트가 20만줄 차지하는 셈. 하지만 그냥 웹 서버로 돌린다면, import 기능으로 폰트를 삽입할 수 있다. 일단, 정작 3시간을 투자해서 가장 용량이 작은 한글 폰트를 찾았다! 이른바 '도훈체'.

도훈체는 무료 폰트이다. 구글 폰트 사이트에서 확인 가능하다.

 

하지만 three.js에서 폰트를 사용하려면 폰트.json파일이 필요하다. 폰트 파일을 다운받으면 ttf파일 형태인데, 이를 json파일로 변환해야 한다. 이때 필요한 훌륭한 사이트가 있다. FaceType.js라는 사이트인데, 아래 사이트에서 ttf파일을 json으로 손쉽게 변경할 수 있다. 원하는 폰트가 있다면, 아래 사이트에 가서 json파일을 얻자.

FaceType.js에서 json파일로 변형한 파일은 도훈체의 총 용량은 1.4M 정도다. 무려 2만 라인이다. 나중에 시간이 된다면 three.js에 특화된 한글 폰트체를 따로 만들어야겠다. json변환시, 총 0.5M가 넘지 않도록 말이다. 일단 도훈체.json파일을 사용해보쟈~

Do Hyeon_Regular.json

▷폰트 선언

먼저 fontJSON객체를 만들어서 폰트를 넣어야 한다. 

let fontJSON = {      glyphs = {}..       ....        ..      (폰트 코드가 너무 길어서 중략)   .. }

폰트 코드가 넘 길어서(약 2만 line)일단 생략하고, 다음 코딩을 진행해보자. json파일을 fontJSON객체 안에 그냥 넣으면 된다. 그리고 fontJSON아래에는 아래와 같은 기본 뼈대 파일을 넣자. 

let scene, camera, renderer, text; let ADD = 0.01 let createGeometry = function(){} let init = function(){} let render = function(){} init() render()

▷createGeometry() 함수::폰트 설정

이제 정말 중요한 textGeometry를 생성하는 방법을 알아보자. 3D 텍스트를 웹에서 로드하려면 loader가 있어야 한다. three.js는 텍스트 폰트 loader를 제공해준다. loader변수에 THREE.FontLoader()객체를 넣자. 그리고 font 변수를 선언하고, loader가 갖고 있는 기능(매서드) parser를 사용해서 fontJSON폰트를 웹에서 띄울 수 있도록 파싱(변환)한다.

let createGeometry = function(){    let loader = new THREE.FontLoader();    let font = loader.parse(fontJSON);    let geometry = new THREE.TextGeometry("즐거운 개발자!",{font:font, size:5,height:1});    let material = new THREE.MeshBasicMaterial({color:0x035b59});        text = new THREE.Mesh(geometry, material);        text.position.x = -15;        scene.add(text); };

나머지는 box나 sphere생성과 같다. TextGeometry()를 선언하되, 첫번째 파라미터에는 '글자', 두번째 파라미터에는 객체 형식으로 font를 지정하고, 크기와 높이값을 넣는다.(threejs.org문서 참조) 나머지는 지오메트리 설정법과 같다. 

▷init() 함수 설정하기

init함수에서 눈여겨 볼 부분은 아예 없다; createGeometry()를 선언하는 것 외에는 모두 기존 뼈대파일과 같다.

let init = function(){      scene = new THREE.Scene();      scene.background = new THREE.Color(0xffffff);      camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,1000);     camera.position.set(0,5,40);   createGeometry();   renderer = new THREE.WebGLRenderer();   renderer.setSize(window.innerWidth*0.375,window.innerHeight*0.375);   document.getElementById('webgl-font').appendChild(renderer.domElement); }

랜더 함수에는 애니메이팅을 넣어보쟈~

let render = function(){     text.rotation.x += ADD;     renderer.render(scene,camera);     requestAnimationFrame(render); }

text의 rotation.x값에 ADD를 넣어주면, 글씨가 아래처럼 빙글빙글~ 돌아간다.