1. what is three.js?

• 실제로 three.js로 오브젝트를 표현하려면 장면, 카메라 및 렌더러의 세 가지가 필요하다.
• 카메라로 장면을 렌더링 할 수 있다.

1) 예시, 움직이는 큐브

공식 라이브 예제보기

(1) 장면 렌더링하기

const scene = new THREE.Scene();

(2) 카메라 렌더링하기

• three에는 여러가지 카메라기 있다. (PerspectiveCamera가 카메라 종료 중 하나)
• PerspectiveCamera(시야, 종횡비, 근거리 및 원거리 클리핑 평면)

매개변수	설명
시야	디스플레이에 표시되는 장면의 범위
종횡비	항상 요소의 너비/ 높이 값을 사용
근거리 및 원거리 클리핑 평면	근거리에서 멀리 있거나, 카메라에서 더 멀리 떨어진 오브젝트는 렌더링하지 않음(성능향상에 중요)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/Window.innerHeight, 0.1, 1000);

(3) 랜더러

• WebGL을 지원하지 않는 사용자를위한 대체 수단으로 자주 사용한다.

const renderer = new THREE.WebGLRenderer();

• 앱을 랜더링할 크기를 설정한다.
• 브라우저 창의 너비와 높이값을 주로 사용한다.
• 앱의 크기를 유지하고 싶지만, 더 낮은 해상도로 랜더링하려면 세번째 인수에 false를 사용한다.

renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth/2, window.innerHeight/2, false );
//<canvas>의 너비와 높이가 100 % 인 경우 앱을 절반 해상도로 렌더링.

• 마지막으로 HTML문서에 renderer요소를 추가한다.(랜더러가 장면을 보여주기 위해 사용하는 <canvas>요소 임)

document.body.appendChild( renderer.domElement );

(4) 오브젝트(큐브) 추가하기

• 큐브를 만들려면 BoxGeometry 가 필요하다.

(BoxGeometry는 큐브의 모든 점 ( 정점 )과 면을 포함하는 오브젝트)

const geometr = new THREE.BoxGeometry();

• Three.js에는 여러 가지 재질이 있다.( MeshBasicMaterial 등 )
• 색상은 CSS 또는 Photoshop에서 작동하는 것과 동일하다. ( 16 진수 색상 )

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

• THREE.Mesh는 지오메트리 객체와 색깔 및 재질 객체를 받아 하나의 오브젝트를 구성한다.

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

• cube 객체를 장면에 삽입한다. (이때, 기본으로 (0,0,0) 좌표에 추가됨)

scene.add( cube );

• 카메라를 살짝 이동시켜 큐모 객체가 보이게 한다.

camera.position.z = 5;

• 이 큐브 객체를 html에 렌더링을 해야 우리가 볼 수 있다.
• render나 animate loop를 사용하여 화면이 새로 고침될 때마다 렌더러가 장면을 그리는 루프를 생성한다. (일반 화면에서는 초당 60 회를 의미)
• requestAnimationFrame 은 사용자가 다른 브라우저 탭으로 이동할 때 일시 중지한다.(자원절약!)

const animate = function () {
	requestAnimationFrame( animate );   //loop

	cube.rotation.x += 0.01;     //cube객체에 회전 애니메이션 추가
	cube.rotation.y += 0.01;

	renderer.render( scene, camera );   //이 scene, camera에 애니메이션 랜더링
};

animate();