- 화면 구성
new THREE.Scene() : 장면
new THREE.PerspectiveCamera(fov, aspectRatio, near, far) : 카메라
fov(field of view) : 디스플레이어 보이는 장면의 범위, deg단위(45 = 45도)
aspect ratio : 보통 화면의 너비 나누기 높이값을 사용
new THREE.WebGLRenderer : 렌더러
setSize(w, h) : 렌더링시에 사이즈를 설정해줘야함
document.body.appendChild를 통해 설정을 끝낸 렌더러를 추가해준다. 일반적으로는 윈도우의 가로 세로값을 사용하지만 /2와 같이 사이즈를 줄여사 사용하기도 한다
* 해당도를 낮추려면 setSize메서드를 사용할때 세번째 인자로 false를 넣어주면 절반의 해상도로 렌더링 함
- 큐브 만들기
new THREE.BoxGeometry(w, h, depth, widthSegments, heightSegments, depthSegments) : 6면체의 큐브를 만들 수 있다
new THREE.MeshBasicMaterial() : {color: hex} 와 같은 형태로 파라미터를 전달해서 큐브의 색을 설정할 수 있다.
new THREE.Mesh() : 생성한 상자와 설정한 색상값을 파라미터로 사용해서 큐브를 생성합니다.
scens.add(cube) : 생성한 큐브를 화면구성에서 만든 scene에 추가합니다.
- 장면 렌더링
requestAnimationFrame( animate ) : 장면을 초당 60회 렌더합니다.
function animate() {
requestAnimationFrame( animate )
renderer.render( scene, camera )
}
animate()위의 코드처럼 초당 60회 렌더를 할 수 있는 함수를 생성합니다.
생성한 큐브를 회전시키기 위해 rotate값을 animate 함수안에 넣어주면 회전이 가능합니다.cube.rotation.x += 0.01과 같은 형태로 회전이 가능합니다.