three.js 라이브러리 공부하기

three.js 기초 강의글 보고 까먹을까봐 작성하는 글

보고 배운 강의 출처입니다!! : http://binteractive.org/?p=213

예제 및 예제코드는 여기서 확인하세요.

three.js는 ie10 이하 호환이 안됩니다.

[1편]

-구도 잡고 화면 만드는 것 Scene

-화면 촬영 PerspectiveCamera

-화면에 표현 WebGLPenderer

 실제 우리 눈에 보여지게 해주는 renderer

three에서 생성한 함수이기 때문에 아래와 같이 실행

var camera = new THREE.PerspectriveCamera(...);

3d 객체는 표면이 추가되어야 한다.(재질, 색....)

재질을 채우기 위해 Mesh를 함수로 만들어야  위 출처에서 설명하기를 Mesh는?

Geometry - 점, 선, 면 으로 이루어짐

Material - Geometry 색을 채워 줌 (재질)

Mesh - 점, 선, 면 들에 색을 채워준 덩어리?

즉, Geometry + Material = Mesh 라고 한다.

Mesh는 아래와 같이 추가해야 한다.

// scence.add(Mesh변수명);

var geometry = new THREE.BoxGeometry(1,1,1);

var meterial = new THREE.MeshBasicMaterial({color : 0x00ff00});

var cube = new THREE.Mesh(geometry, material);

scene.add(cube);

cube는 Mesh 변수 값이므로 변수명이 다른 것이어도 무방하다.

실제 render

-매 프레임마다 함수를 호출

-애니메이트 코드

-HTML 화면에 scene, camera render

// 최초 호출

// 재귀함수 이므로 최초 1번의 호출만 있으면 반복 호출 됨.

animate();

function animate(){

    requestAnimationFrame(animate);

    // x, y 회전

    cube.rotation.x += 0.1;

    cube.rotation.y += 0.1;

    // rendering

    renderer.render(scene,camera);

};

[2편]

z좌표가 클 수록 멀리서 보는 느낌을 준다.

1편에서는 camera.position.z = 5; 였는데,

2편에서는 50으로 수정한다.

비교 이미지 ↓

z = 5

z = 50

점을 이용해 선을 만든다.

3차원 점은 아래와 같이 작성한다.

var material1 = new THREE.LineBasicMaterial({color : 0xe0e0e0 });

var geometry = new THREE.Geometry();

// 점 추가

geometry1.vertices.push(new THREE.Vector3(x, y, z));

geometry1.vertices.push(new THREE.Vector3(x, y, z));

// 라인 객체

var line = new THREE.Line(geometry1, meterial1);

scene.add(line);

x - x좌표

y - y좌표

z - z좌표

animate로 회전 시키기.

animate();

function animate(){

    requestAnimationFrame(animate);

    line.rotation.x -= 0.003;

    line.rotation.y -= 0.004;

    renderer.render(scence, camera);

}

선, 박스 차이

// 선

var geometry = new THREE.Geometry();

var material = new THREE.LineBasicMaterial( { color: 0xe0e0e0  } );

// 박스

var geometry = new THREE.BoxGeometry( 100, 100, 100 );

var material = new THREE.MeshBasicMaterial( { color: 0x909090, transparent: true } );

그리기 위해서 

scene, camera, renderer가 필요하다고 했는데, 

여기서 renderer를 보면 WebGLRenderer()이란게 있다.

var renderer = new THREE.WebGLRenderer();

WebGL이 뭘까?

구글 검색 해본 결과, 웹 기반의 그래픽 라이브러리라고 한다.

플러그인을 사용하지 않고 OpenGL 기반 API를 이용하여 브라우저의 HTML canvas에 랜더링하여 3D 웹 컨텐츠 제작을 가능하게 한다.

아 너무 어려워서 박스 랜덤 생성까지만 따라 하다가 포기했다...

다음에 필요해지면 다시 공부해야겠다!