Web3D 즐기기 1 :: three.js 기본 설정하기
webgl은 말 그대로 web에서 3D 그래픽을 랜더링할 수 있는 API이다.
글을 작성하고 있는 현재, webgl2가 출시되었고 아직 정확하게 알아보지는 않았다. 왜냐하면 three.js가 있기 때문이다. three.js는 webgl에서 반복으로 처리해야 할 부분은 짧은 코드로 표현할 수 있게끔 만든 자바스크립트 라이브러리다. three.js를 활용하면 10줄에 걸쳐 작성해야 할 코드를 단 2줄로 줄일 수 있다. web 3D의 제이쿼리(?)라 할 수 있다.
티스토리에서 three.js를 활용하면, 웹서버를 따로 설정할 필요가 없다. 실험하기에는 아주 좋은 환경이라 생각한다. 티스토리에서 어느 정도 three.js를 익힌 후에는 클라우드 서버에 node.js를 설치하고, three.js와 관련된 어플을 본격적으로 제작해보자.(향후, 포스팅 예정)
https://threejs.org/
위의 사이트에서 three.min.js파일을 다운받아서 티스토리 스킨편집(html) -> 파일 업로드를 한다.
링크 경로 ex) :: https://tistory3.daumcdn.net/tistory/3001762/skin/images/three.min.js
티스토리에 저장된 경로를 복사해서
<script src="https://tistory3.daumcdn.net/tistory/3001762/skin/images/three.min.js"></script>로
넣어주면, three.js를 티스토리의 포스팅에서 3D 기능을 활용할 수 있다.
▷뼈대 만들기
<div>태그에 id를 지정하고, three.js 태그는 티스토리 '스킨편집'에서 <head></head>사이에 아래와 같이 지정한다. three.min.js 파일과 TrackballControls.js 파일을 스크립트로 연결한다.
<head>
<script src="https://tistory3.daumcdn.net/tistory/3001762/skin/images/three.min.js"></script>
<script src="https://tistory4.daumcdn.net/tistory/3001762/skin/images/TrackballControls.js></script>
</head>
TrackballControls.js파일은 마우스로 회전을 하거나 클로즈업과 같은 동작을 할 수 있도록 만들어주는 라이브러리이다. <head>태그에 필요한 라이브러리를 연결했다면, init( )함수를 아래와 같이 생성한다. function( ){} 앞뒤에 괄호를 붙이고, 아래처럼 다시 괄호를 설정하면 '즉시 실행 함수'가 된다. 괄호 안에 있는 함수의 init( )함수는 바로 실행된다.
(function(){
init();
})( )
function init( ){
[A]
}
뼈대를 위와 같이 생성했다면, [A]부분에 three.js관련한 코드를 작성한다. three.js 관련 코드를 작성하기에 앞서 'alert('three.js 시작!');이라는 간단한 실험을 해보자. 정상적으로 알림 팝업창이 나타나면, 본격적으로 웹3D를 향해 달려보자!!
▷랜더링에 필요한 three.js 기본 설정
3D란 x,y,z축의 세 가지 방향이 나타나 있는 장면(scene)을 의미한다. 2D를 일반 평면이라 한다면, 3D는 깊이감이 추가된 장면을 뜻한다. 웹에서 3D를 표현하려면 어떤 요소가 필수적으로 있어야 할까?
1) 씬
2) 카메라
3) 라이트
4) 물체
5) 랜더러(각 요소들을 화면에 3D로 기록하는 작업)
기본적으로 위의 5가지가 충족되면, 웹에서 즉시 3D 오브젝트(물체)를 구현할 수 있다. 5가지 중에서 어느 한가지가 충족되지 않으면 의도한 화면을 표현할 수 없다. 가령, 카메라와 물체 그리고 랜더러까지 구현했지만 화면이 검게 나오는 경우가 있다. 분명 에러가 없는데 화면이 보이지 않는다!
이해를 하지 않으면 모두 암기과목이 된다. 3D 프로그래밍을 할 때는 상식의 연장선에서 생각할 시간이 필요하다. 가령, 우리는 빛이 없으면 물체를 볼 수 없다. 빛이 없으면 세상을 볼 수 없는 것처럼, 3D 코딩 역시 라이팅을 넣지 않으면 화면이 나타나지 않는다.
정리하자면, 3D 코딩에 있어 다음 5가지는 필수적인 사항이다.
var scene = new THREE.Scene( );
var camera = new THREE.[카메라 이름]
var renderer = new THREE.WebGLRenderer( );
var object = new THREE.SphereGeometry( );
var light = new THREE.[라이트 이름]
**new THREE.[ ] 문법은 자바스크립트에서 객체 인스턴스를 생성하는 방식으로, three.js를 공부하려는 사람은 이미 자바스크립트에 관한 학습이 되어 있으리라 생각하고, 설명을 생략한다. 다음 포스팅에서는 5가지 사항을 충족하는 기본 장면을 제작해보자.
'코드 스터디' 카테고리의 다른 글
| three.js 3편 그림자 만들기 (0) | 2019.04.23 |
|---|---|
| three.js 2편. 기본 장면 만들기 (0) | 2019.04.22 |
| html5 API 입문 (5) 'Canvas 키보드 이벤트' (0) | 2019.04.20 |
| html5 API입문 (4) - 마우스 핸들러 편 - (0) | 2019.04.19 |
| html5 API입문(3) -캔버스 애니메이션- (0) | 2019.04.18 |
댓글