THREE GEOMETRY (1)

김삿갓의싱잉랩·2023년 8월 25일

✨ React-Three

three js를 React에서 간편하게 쓸 수 있다!!

npm i three
npm install three @types/three @react-three/fiber
npm i @react-three/drei

three.JS는 매우 다양한 내부 라이브러리들을 갖고 있다.

ThreeJS로 만든 웹페이지 예시

따라서 필요할 때마다 하나씩 가져와서 사용할 수 있다.

이번 공부는 Three.JS의 가장 기초부터 시작하였다.

✅ Canvas

React tree를 담는 기본적인 Component

말 그대로 캔버스이다.

react-three에서는 간단하게 모듈을 불러와서 Canvas를 구성할 수 있다.

<Canvas>
			<PerspectiveCamera>
				<OrbitControls />
				<ambientLight intensity={1.5} />
				<directionalLight
					color="white"
					intensity={2}
					position={[3, 3, 5]}
				/>
				<Box />
				<Capsule />
				<Circle />
				<Cone />
				<Plane />
				<Sphere />
			</PerspectiveCamera>
		</Canvas>

Canvas안에는 구현하고 싶은 모든 객체들을 그려 넣을 수 있다.

Canvas는 부모노드의 크기와 높이를 따라간다.

Canvas의 사이즈를 조절해주고 싶으면 div로 감싸고 간단하게 width와 height값만 주면 자연스럽게 형성된다.

✅ Geometry

캔버스안에 그릴 수 있는 가장 간단한 3d Object

📌 BOX

function Box() {
		return (
			<mesh>
				<boxGeometry args={[1, 1, 1]} />
				<meshPhongMaterial
					color="orange"
					emissive={'black'}
					shininess={5}
				/>
			</mesh>
		);
	}

가장 기본적인 3D object이다.

Object는 Mesh안에 그 특성들을 정의할 수 있다.

Mesh는 3D object를 묶어주는 큰 틀이라고 할 수 있다.

다시 본론으로 돌아와서

BOX object는 boxGeometry 컴포넌트를 불러와서 만들어낼 수 있다. 간단하게 [ args는 x축 길이, y축 길이, z축 길이 ]이다.

3D Object는 기본틀을 만든 다음에 그 안을 채워 넣어줘야 한다. 그것이 바로 meshMaterial이다.

meshMaterial의 종류는 상당히 다양하다.

기본적으로도 정말 다양한 재질을 넣을 수 있고, 경우에 따라 택스쳐팩을 따로 준비하여 넣을 수 도 있다.

공식문서에서도 다양한 종류의 meshMaterial들을 찾아볼 수 있다.

결론은

Mesh안에 geometry로 틀을 그리고 meshMaterial로 채색을 하는 것이다.

이러한 방법으로 여러 geometry와 meshMaterial을 조합해볼 수 있는 것이다.

📌 Capsule

function Capsule() {
		return (
			<mesh position={[1, 1, 2]}>
				<capsuleGeometry args={[1, 1, 32]} />
				<meshStandardMaterial
					metalness={0.2}
					roughness={0.1}
					color="yellow"
				/>
			</mesh>
		);
	}

캡슐 형식의 3d object이다.

mesh안의 형식은 위 Box와 같이 Geometry로 뼈대를 그리고, MeshMaterial로 뼈대에 색칠해주면 된다.

간단하게 이런 object가 있구나라고 알고 있다가

필요하다면 원하는 property를 보고 사용해볼 수 있다.

기본적인 args로는 [ 반지름 길이, 캡슐 높이, 둥근 정도 ] 이다.

📌 Circle

function Circle() {
		return (
			<mesh position={[3, 0, 0]} rotation={[-Math.PI / 2, 0.5, 0]}>
				<circleGeometry args={[1, 128]} />
				<meshStandardMaterial color="blue" />
			</mesh>
		);
	}

원이다.

args로 [ 반지름 크기와, 얼마나 매끄러운 지 ] 를 선언해준다.

📌 Cone

function Cone() {
		return (
			<mesh position={[-3, 2, 0]}>
				<coneGeometry args={[1, 3, 32]} />
				<meshStandardMaterial
					color="green"
					transparent
					wireframe
					opacity={0.1}
				/>
			</mesh>
		);
	}

고깔이다.

args로 [ 반지름 크기, 고깔 높이, 얼마나 매끄러운지 ] 를 선언해준다.

📌 Plane

function Plane() {
		return (
			<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]}>
				<planeGeometry args={[100, 100]} />
				<meshDepthMaterial transparent opacity={0.7} />
			</mesh>
		);
	}

가장 기본적인 평면이다.

주로 바닥작업을 해줄 때 사용할 수 있다.

기본적인 args로 [ x축 길이, y축 길이 ] 를 사용할 수 있다.

📌 Sphere

function Sphere() {
		return (
			<mesh position={[0, 1, -3]}>
				<sphereGeometry args={[1, 32, 32]} />
				<meshToonMaterial color="red" />
			</mesh>
		);
	}