Three.js 시작하기 01 _장면 만들기

scene, camera, renderer 3가지가 필수적으로 존재해야 한다.


▪️scene

const scene = new THREE.Scene();

▪️camera

1. PerspectiveCamera (: 관점카메라)

const camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, near, far);

- attribute
field of view : 표시되는 장면의 범위로 각도 단위의 값.
aspect ratio : 항상 요소의 너비를 높이로 나눈 값을 사용. 그렇지 않으면 이미지가 찌그러져 보인다.
near : camera에서 가장 가까운 object 지점. near 값보다 camera에서 더 가깝다면 렌더링 되지 않는다.
far : camera에서 가장 먼 object 지점. far 값보다 camera에서 더 멀다면 렌더링 되지 않는다.


▪️renderer

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

1. 브라우저 창 크기와 동일하게 렌더링

renderer.setSize( window.innerWidth, window.innerHeight );

2. 브라우저 창의 1/4 크기로 렌더링

renderer.setSize( window.innerWidth/2, window.innerHeight/2 );

3. 브라우저 창의 크기는 유지하되 낮은 해상도로 렌더링
3번째 attribute인 updateStyle을 호출한다. 해상도가 대략 1/2로 떨어진다.

renderer.setSize( window.innerWidth, window.innerHeight, false );

▫️cube 만들기
1. Geometry

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

BoxGeometry의 attribute 값은 앞에서부터 차례대로 x, y, z 축의 크기를 나타낸다.
값을 입력하지 않으면 기본값 1로 대체된다.

2. Material

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

meterial은 선택적 요소로 선언 및 적용하지 않으면 기본 컬러인 white 컬러가 적용된다.

3. Mesh

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

앞서 선언한 geometry, material을 적용하고 scene에 삽입할 수 있다.



▫️Rendering The Scene
렌더링을 위해서는 render 또는 animate loop를 해야한다.