three.js Mesh

그래픽스에서 Mesh는 물체의 꼭짓점을 생각하면 편하다.

 

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
	color : 'red'
});

먼저 geometry객체와 material 객체를 만드는데, material에서는 여러 설정 값 중 color를 설정하고 있다. color에는 위 코드처럼 문자열이나, 0xff0000 같은 8진수, #ff0000 로도 설정가능하다.

 

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

renderer.render(scene, camera);

geometry와 material 객체를 통해 mesh객체를 만들어서 scene에 추가한다. 최종적으로 render를 실행해주어야 그려진다.

 

const renderer = new THREE.WebGLRenderer({ 
	canvas,
	antialias: true
});

참고로 renderer객체를 생성하는 옵션에서 antialiasing을 적용할 수 있다.