Three JS - Mesh

Mesh

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

geometry에서 geometry(도형)와 meterial(재료)를 생성한다. 두 가지를 합해서 Mesh(물체)로 만든다.

그 다음 장면에 추가를 한다.

🔹Geometry

Three js에서는 기본으로 제공하는 도형이 있다.

Geometry	설명	생성 예시
`BoxGeometry`	직육면체 (큐브 포함)	`new THREE.BoxGeometry(1, 1, 1)`
`SphereGeometry`	구	`new THREE.SphereGeometry(1, 32, 32)`
`PlaneGeometry`	평면 (2D 사각형)	`new THREE.PlaneGeometry(5, 5)`
`CircleGeometry`	원형 평면	`new THREE.CircleGeometry(2, 32)`
`ConeGeometry`	원뿔	`new THREE.ConeGeometry(1, 2, 32)`
`CylinderGeometry`	원기둥	`new THREE.CylinderGeometry(1, 1, 2, 32)`
`TorusGeometry`	도넛 모양	`new THREE.TorusGeometry(1, 0.4, 16, 100)`
`TorusKnotGeometry`	복잡한 매듭형 도넛	`new THREE.TorusKnotGeometry(1, 0.3, 100, 16)`
`RingGeometry`	가운데가 뚫린 원반	`new THREE.RingGeometry(0.5, 1.5, 32)`
`DodecahedronGeometry`	12면체	`new THREE.DodecahedronGeometry(1)`
`IcosahedronGeometry`	20면체	`new THREE.IcosahedronGeometry(1)`
`OctahedronGeometry`	8면체	`new THREE.OctahedronGeometry(1)`
`TetrahedronGeometry`	4면체	`new THREE.TetrahedronGeometry(1)`
`LatheGeometry`	회전형 커스텀 (선으로 만든 프로필 회전)	`new THREE.LatheGeometry(points)`
`ExtrudeGeometry`	2D 모양을 3D로 밀어내기	`new THREE.ExtrudeGeometry(shape, options)`
`TextGeometry`	텍스트 3D로 표현	`new THREE.TextGeometry('Hello', options)`

🔹MeshBasicMaterial

MeshBasicMaterial은 가볍고, 빛 필요 없이 단순하게 표현 가능하다. 조명 효과나 리얼리즘이 필요할 땐 MeshStandardMaterial, MeshPhongMaterial 등을 사용해야 한다.

속성	설명
`color`	기본 색상 (hex, CSS string 등 가능)
`map`	텍스처 이미지 (`THREE.Texture`)
`wireframe`	선형으로만 그리기 (와이어프레임 보기)
`transparent`	투명도 허용 여부 (`true` 설정 시 `opacity` 적용됨)
`opacity`	투명도 (0 = 완전 투명, 1 = 불투명)
`alphaMap`	알파 텍스처 (투명 마스크용 이미지)
`side`	렌더링 면: `FrontSide`(기본), `BackSide`, `DoubleSide`
`visible`	렌더링 여부 (`false`면 보이지 않음)
`depthTest`	다른 오브젝트와의 깊이 비교 여부
`depthWrite`	깊이 버퍼에 기록할지 여부
`blending`	혼합 모드 (`THREE.AdditiveBlending` 등)

🎲기본 색상 설정

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

단순하게 색상을 추가할 경우 다음과 같이 생성하면 된다.

🎲텍스처 적용

const texture = new THREE.TextureLoader().load('/textures/wood.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });

사용할 텍스처를 TextureLoader().load로 가져온 후, map으로 적용한다.