레슨 2 / 8·20분
도형과 재질
Geometry — 3D 도형의 뼈대
Geometry는 3D 객체의 형태(꼭짓점과 면)를 정의합니다. Three.js는 박스, 구, 원기둥, 평면 등 다양한 내장 지오메트리를 제공합니다. Material은 그 도형의 표면 특성(색상, 반사, 투명도 등)을 결정합니다. Mesh는 Geometry + Material을 결합한 최종 3D 객체입니다.
javascript
// ── 기본 Geometry 종류 ──
const box = new THREE.BoxGeometry(1, 1, 1); // 가로, 세로, 깊이
const sphere = new THREE.SphereGeometry(0.7, 32, 32); // 반지름, 가로분할, 세로분할
const cylinder = new THREE.CylinderGeometry(0.5, 0.5, 1.5, 32); // 상단R, 하단R, 높이, 분할
const plane = new THREE.PlaneGeometry(5, 5); // 가로, 세로
const torus = new THREE.TorusGeometry(0.5, 0.2, 16, 48); // 반지름, 튜브R, 분할, 분할Material — 표면의 질감과 색상
javascript
// MeshBasicMaterial — 조명 영향 없음, 단색으로 표시
const basicMat = new THREE.MeshBasicMaterial({
color: 0xff6347,
wireframe: false, // true면 와이어프레임으로 표시
});
// MeshStandardMaterial — PBR(물리 기반 렌더링), 조명 필요
const standardMat = new THREE.MeshStandardMaterial({
color: 0x2196f3,
metalness: 0.7, // 0(비금속) ~ 1(금속)
roughness: 0.3, // 0(매끈) ~ 1(거침)
});
// MeshPhongMaterial — 반짝이는 하이라이트 표현
const phongMat = new THREE.MeshPhongMaterial({
color: 0x9c27b0,
shininess: 100, // 하이라이트 강도
specular: 0xffffff, // 하이라이트 색상
});- •MeshBasicMaterial — 조명과 무관하게 단색 표시, 프로토타입에 적합
- •MeshStandardMaterial — PBR 기반으로 사실적 질감 표현 (권장)
- •MeshPhongMaterial — 플라스틱, 도자기 같은 광택 표현에 적합
- •metalness — 금속 느낌 정도 (0: 플라스틱, 1: 금속)
- •roughness — 표면 거칠기 (0: 거울처럼 매끈, 1: 완전 무광)
javascript
// Mesh 생성 — Geometry + Material 결합
const cubeMesh = new THREE.Mesh(box, standardMat);
cubeMesh.position.set(-2, 0.5, 0);
scene.add(cubeMesh);
const sphereMesh = new THREE.Mesh(sphere, phongMat);
sphereMesh.position.set(0, 0.7, 0);
scene.add(sphereMesh);
const cylinderMesh = new THREE.Mesh(cylinder, basicMat);
cylinderMesh.position.set(2, 0.75, 0);
scene.add(cylinderMesh);
// 바닥 평면
const floorMat = new THREE.MeshStandardMaterial({ color: 0x333333 });
const floor = new THREE.Mesh(plane, floorMat);
floor.rotation.x = -Math.PI / 2; // 수평으로 눕히기
scene.add(floor);💡
MeshStandardMaterial이나 MeshPhongMaterial을 사용하면 씬에 조명(Light)이 없을 때 검은색으로 보입니다. 반드시 조명을 추가하거나, 테스트 시에는 MeshBasicMaterial을 사용하세요.