[ Three.js ] 초보자를 위한 회전하는 3D 원기둥 만들기

Three.js는 웹에서 3D 그래픽을 쉽게 구현할 수 있는 강력한 라이브러리입니다. 이번 글에서는 @react-three/fiber와 @react-three/drei를 사용해 간단한 회전하는 3D 원기둥을 만들어보겠습니다.

 

1. 프로젝트 설정

---

먼저, React 프로젝트를 생성하고 필요한 라이브러리를 설치합니다.

npx create-react-app my-threejs-app
cd my-threejs-app
npm install @react-three/fiber @react-three/drei

 

 

2. 코드 작성

---

아래는 회전하는 원기둥을 만드는 전체 코드입니다. 코드를 App.js 파일에 실행해 보세요.

import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Sparkles } from '@react-three/drei';
import { useRef } from 'react';

const RotatingCube = () => {
  const meshRef = useRef();

  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.y += 0.01; // Y축 회전
      meshRef.current.rotation.x += 0.01; // X축 회전
    }
  });

  return (
    <mesh ref={meshRef}>
      <cylinderGeometry args={[1, 1, 1]} /> {/* 원기둥 생성 */}
      <meshLambertMaterial color='#468558' emissive='#468558' /> {/* 재질 설정 */}
      <Sparkles count={100} scale={1} size={6} speed={0.002} noise={0.2} color='orange' /> {/* 빛나는 효과 추가 */}
    </mesh>
  );
};

const App = () => {
  return (
    <Canvas style={{ height: '100vh', width: '100vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <OrbitControls enableZoom={true} enablePan enableRotate /> {/* 카메라 컨트롤 */}
      <directionalLight position={[1, 1, 1]} intensity={10} color={0x9CDBA6} /> {/* 조명 추가 */}
      <color attach='background' args={['#F0F0F0']} /> {/* 배경색 설정 */}
      <RotatingCube /> {/* 회전하는 원기둥 추가 */}
    </Canvas>
  );
};

export default App;

 

 

3. 코드 설명

---

• Canvas 컴포넌트
  • Three.js 장면을 렌더링 하는 공간입니다.
  • style 속성을 사용해 전체 화면을 채우도록 설정했습니다.
• OrbitControls
  • 마우스로 카메라를 움직일 수 있게 해 줍니다.
  • enableZoom, enablePan, enableRotate를 통해 확대/축소, 이동, 회전 기능을 활성화했습니다.
• directionalLight
  • 특정 방향에서 빛을 비추는 조명입니다.
  • position은 빛의 방향, intensity는 빛의 강도, color는 빛의 색상을 설정합니다.
• RotatingCube 컴포넌트
  • 회전하는 원기둥을 만드는 컴포넌트입니다.
  • useFrame 훅을 사용해 매 프레임마다 원기둥을 회전시킵니다.
  • cylinderGeometry로 원기둥을 생성하고, meshLambertMaterial로 재질을 설정했습니다.
  • Sparkles 컴포넌트를 사용해 원기둥 주변에 빛나는 효과를 추가했습니다.
• color (배경색)
  • attach='background'를 사용해 장면의 배경색을 설정했습니다.

 

4. 실행 결과

---

• 화면 가운데 회전하는 초록색 원기둥이 나타납니다.
• 마우스로 화면을 드래그해 카메라를 움직일 수 있습니다.
• 원기둥 주변에 오렌지색 빛나는 효과가 추가되어 더욱 화려한 느낌을 줍니다.

 

 

5. 추가로 해볼 만한 것들

---

1. 원기둥 모양 변경
   • cylinderGeometry의 args를 수정해 원기둥의 반지름이나 높이를 바꿔보세요.
   • 예: <cylinderGeometry args={[2, 1, 3]} />
2. 빛의 색상과 강도 조절
   • directionalLight의 color와 intensity 값을 변경해 보세요.
   • 예: color={0xFF0000}, intensity={5}
3. Sparkles 효과 커스터마이징
   • Sparkles의 count, size, speed 등을 조절해 다양한 효과를 만들어보세요.
   • 예: count={200}, size={10}, speed={0.01}

 

6. 마무리

---

이번 글에서는 Three.js를 사용해 간단한 회전하는 원기둥을 만들어보았습니다. Three.js는 웹에서 3D 그래픽을 구현하는 데 매우 유용한 도구입니다. 이제 여러분도 이 코드를 바탕으로 더 복잡하고 멋진 3D 장면을 만들어보세요!

 

 

참고 자료:

• Three.js 공식 문서
• @react-three/fiber 문서
• @react-three/drei 문서