Three.js를 이용해 웹사이트를 예쁘게 꾸며보자! – 2 (기본 도형 알아보기2)

Nevgiveup·2025년 1월 13일

JavaScript three.js

Three.js를 활용해보자

목록 보기

3/6

지난글

BoxGeometry (직육면체)
CircleGeometry (2D원)
ConeGeometry (원뿔)
CylinderGeometry (원기둥)
DodecahedronGeometry (십이면체)
ExtrudeGeometry (특수 도형)

이어서

지난 포스트에서 기본도형들을 알아보았는데 워낙 많다 보니 이번 포스트도 기본도형에 대해 알아볼게요. 남은 12개 중에 6개를 알아볼게요.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="c"></canvas>
    <script type="module" src="./index.js"></script>
  </body>
</html>

index.js
import * as THREE from './node_modules/three/build/three.module.js';

const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
const fov = 70;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 20;

const scene = new THREE.Scene();

// 여기에 복사 붙혀넣기

function animate() {
  // 애니메이션
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

index.js 15번째 줄을 수정하시면 됩니다.

1.IcosahedronGeometry

이 도형은 20면체입니다. 앞에서 알아봤던 DodecahedronGeometry(십이면체)도형이랑 사용법이 똑같습니다.

let radius = 2;
let detail = 5;
const geometry = new THREE.IcosahedronGeometry(radius, detail);
const material = new THREE.MeshBasicMaterial({
  color: '#FF0000',
  wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

조절해보기 : https://threejs.org/docs/#api/en/geometries/IcosahedronGeometry

2.LatheGeometry

이건 무슨 도형이라고 말해야할지 잘 모르겠습니다. Three.js 공식문서에서는 이렇게 설명합니다.

const points = [];
for (let i = 0; i < 10; ++i) {
  points.push(new THREE.Vector2(Math.sin(i * 0.2) * 3 + 3, (i - 5) * 0.8));
}
const geometry = new THREE.LatheGeometry(points);
const material = new THREE.MeshBasicMaterial({
  color: 'blue',
  wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

조절해보기 : https://threejs.org/docs/#api/en/geometries/LatheGeometry

3.OctahedronGeometry

이 도형은 8면체입니다. 사용할 수 있는 인자로는 radius와 detail이 있습니다.

const radius = 3;
const detail = 1;
const geometry = new THREE.OctahedronGeometry(radius, detail);
const material = new THREE.MeshBasicMaterial({
  color: 'blue',
  wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

조절해보기 : https://threejs.org/docs/#api/en/geometries/OctahedronGeometry

4.ParametricGeometry

이 도형은 2D 격자값(격자 하나의 벡터값)을 받아 3D 값을 반환하는 함수를 인자로 전달하여 면을 만든다고 합니다.
공식문서에는 이렇게 한다고하는데 저는 안되서 공식문서만 첨부 하겠습니다. manual에서는 나와있는데 docs에서는 없어진 것 보면 더이상 지원 안하는 것 같기도 합니다.

const slices = 23;  
const stacks = 21;  
// from: https://github.com/mrdoob/three.js/blob/b8d8a8625465bd634aa68e5846354d69f34d2ff5/examples/js/ParametricGeometries.js
function klein( v, u, target ) {

	u *= Math.PI;
	v *= 2 * Math.PI;
	u = u * 2;

	let x;
	let z;

	if ( u < Math.PI ) {

		x = 3 * Math.cos( u ) * ( 1 + Math.sin( u ) ) + ( 2 * ( 1 - Math.cos( u ) / 2 ) ) * Math.cos( u ) * Math.cos( v );
		z = - 8 * Math.sin( u ) - 2 * ( 1 - Math.cos( u ) / 2 ) * Math.sin( u ) * Math.cos( v );

	} else {

		x = 3 * Math.cos( u ) * ( 1 + Math.sin( u ) ) + ( 2 * ( 1 - Math.cos( u ) / 2 ) ) * Math.cos( v + Math.PI );
		z = - 8 * Math.sin( u );

	}

	const y = - 2 * ( 1 - Math.cos( u ) / 2 ) * Math.sin( v );

	target.set( x, y, z ).multiplyScalar( 0.75 );

}

return new ParametricGeometry(
	klein, slices, stacks );

https://threejs.org/docs/#api/en/geometries/ParametricGeometry

5.PlaneGeometry

제가 가장 많이 쓰고 좋아하는 2D평면 도형입니다. 이 도형은 카드라고 생각하시면 편합니다. 인자로는 width, height, widthSegments, heightSegments가 있습니다. 단점으로는 반대쪽에서 보면 안보입니다. 그래서 카드를 구현할때 rotation으로 뒤집어서 또 만들어줘야하는 불편함이 있습니다.

const width = 2;
const height = 4;
const geometry = new THREE.PlaneGeometry(width, height);
const material = new THREE.MeshBasicMaterial({
  color: 'green',
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

조절해보기 : https://threejs.org/docs/#api/en/geometries/PlaneGeometry

6.PolyhedronGeometry

이 도형은 다면체입니다.주어진 3D 점들(verticesOfCube)을 중심으로 삼각형(indicesOfFaces)을 구 형태로 잇습니다.

const verticesOfCube = [
  -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1,
  1, 1,
];
const indicesOfFaces = [
  2, 1, 0, 0, 3, 2, 0, 4, 7, 7, 3, 0, 0, 1, 5, 5, 4, 0, 1, 2, 6, 6, 5, 1, 2, 3,
  7, 7, 6, 2, 4, 5, 6, 6, 7, 4,
];
const radius = 7.0;
const detail = 1;
const geometry = new THREE.PolyhedronGeometry(
  verticesOfCube,
  indicesOfFaces,
  radius,
  detail,
);
const material = new THREE.MeshBasicMaterial({
  color: 'Violet',
  wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);