장면만들기(Creating a scene)

Scene 만들기

three.js로 무언가를 표현하려면 scene, camera 그리고 renderer가 필요합니다. 이를 통해 카메라로 장면을 구현할 수 있습니다.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

 

PerspectiveCamera(시야각, 종횡비, near, far)

1. 시야각(field of view) :  해당 시점의 화면이 보여지는 정도를 나타냅니다. 값은 각도 값으로 설정합니다.
2. aspect ratio(종횡비)  : 요소높이와, 너비에 맞추어 표시하게 할텐데, 그렇지 않으면 와이드스크립에 옛날
영화를 트는 것처럼 이미지가 틀어져 보입니다.
3. near, far                :  far 값보다 멀리있는 요소나 near 값보다 가까이 있는 오브젝트는 렌더링 되지 않습니다.

renderer

renderer 인스턴스를 생성함과 동시에, 렌더링 할 곳의 크기를 설정해 줘야합니다.
더 낮은 해상도로 렌더링하고 싶을 경우, setSize를 사용하거나 window.innerWidth/2, window.innerHeight/2를 사용해서 화면 크기의 절반으로 구현할 수도 있습니다.
사이즈는 그대로 유지하고 싶지만 더 낮은 해상도로 렌더링하고 싶을 경우, setSize의 updateStyle (세 번째 인자)를 false로 불러오면 됩니다.

마지막으로 제일 중요한 renderer 엘리먼트를 HTML 문서 안에 넣었습니다. 이는<canvas> 엘리먼트로, renderer가 scene을 나타내는 구역입니다.

 

CUBE 만들기

const geometry = new THREE.BoxGeometry(); //큐브에 필요한 꼭짓점과 면이 포함되어 있다.
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); //색칠해줄 요소
const cube = new THREE.Mesh( geometry, material ); //삽입
scene.add( cube );

camera.position.z = 5; //큐브와 위치가 겹치기 때문에 카메라 위치를 변경함

BoxGeometry        : 큐브에 필요한 꼭짓점(vertices)와 면(faces)이 포함되어있음.
MeshBasicMaterial : 큐브를 색칠해줄 요소 hex colors 로 작동함.
Mesh                  : 기하학을 받아 재질을 적용함.
scene.add            : 추가된 모든 것들은 (0,0,0)속성을 가짐 카메라와 큐브가 동일한 위치에 겹치게됨 그렇기 때문에
                          카메라 위치를 변경함

 

scene 렌더링

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

이 코드는 화면이 새로고침 될 때마다 계속해서 렌더링을 해 줄 것입니다.
setInterval을 쓰지않고 requestAnimationFrame 함수를 쓰는 이유는 브라우저 창에서 이탈했을때 멈춰주는 기능이 있다고한다.

여기까지 한다면 멈춰있는 큐브를 볼수있다!

 

큐브 애니메이팅

이전에 만들었던 코드는 움직이지 않지만 이 박스를 다음의 코드로 회전시킬수 있다.

//animate 함수 안의 renderer.render 바로 위에 코드를 넣어주세요.
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

위 코드는 60프레임으로 작동 한다고 한다.

 

출처 : https://threejs.org/docs/#manual/ko/introduction/Creating-a-scene