three.js Geometry

// Mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
    color: 'hotpink',
    side: THREE.DoubleSide,
    wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Geometry를 보기 위해서는 도형의 vertex를 확인하는 것이 편하다. 그래서 잠깐 MeshStandardMaterial의 옵션을 보면, side와 wireframe이 있다.

먼저 side는 기본적으로 외부 단면만 렌더링하는 것이 아니라 양면 다 렌더링하는 것을 말한다.

 

--- TMI ---

 2년전, 개발을 처음 시작했을 즈음 유니티로 처음 맡은 외주에서 캐릭터 모델을 받아 애니메이션 작업을 하고 있는데, 특정 애니메이션에서 일부 폴리곤들만 투명해져서 보이지 않았던 기억이 난다.

 그래픽스에 대한 개념이 전혀 없었던 지라, 모델링 툴에서 폴리곤의 normal 벡터가 잘못 설정되있었다는 것을 몰랐고, 해결방법으로 shader를 double side shader로 교체하여 양면을 모두 렌더링하는 방법으로 얼렁뚱땅 해결했었다. 

--- END ---

 

위 코드를 렌더링해보면 다음과 같은 결과를 볼 수 있는데,

 

// Mesh
const geometry = new THREE.BoxGeometry(1, 1, 1, 16, 16, 16);
const material = new THREE.MeshStandardMaterial({
    color: 'hotpink',
    side: THREE.DoubleSide,
    wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

여기서 BoxGeometry에 매개변수 각각 x, y, z 방면을 추가하면 segment를 분리할 수 있다.

 

https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry 

three.js docs

위 docs에서 매개변수에 따른 변화를 확인해보자.

 

https://threejs.org/docs/index.html?q=circle#api/en/geometries/CircleGeometry 

three.js docs

https://threejs.org/docs/index.html?q=cone#api/en/geometries/ConeGeometry 

three.js docs

https://threejs.org/docs/index.html?q=cyl#api/en/geometries/CylinderGeometry 

three.js docs

circle, cone, cylinder 등 기본 모델의 geometry의 조절가능한 요소를 확인할 수 있다.