Three.js 공부

3요소 scene, camera, renderer

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

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

scene

camera

• Perspective Camera(시야각, 종횡비, near:이거보다 가까이 있으면 안나옴, far:이거보다 멀리 있으면 안보임)

renderer

webgl 사용 못할때를 대비해 많은 renderer가 있다.
render할 사이즈를 setSize를 통해 정해주어야 한다.
(setSize를 사용하거나 window.innerWidth/2, window.innerHeight/2를 사용해서 화면 크기의 절반으로 구현)

큐브 만들기

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
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 - 색칠해줄 요소
Mesh - 기하학을 받아 재질을 적용하고 우리가 화면 안에 삽입하고 자유롭게 움직일 수 있게 함

기본 설정상 scene.add()를 불러오면, 추가된 모든 것들은 (0,0,0) 속성. 이때문에 카메라와 큐브가 겹칠 수 있으므로 position에 살짝 변화를 줌.