[Three.js] 캔버스안에 구형(공모양)을 넣어 보자

 

 

 

 

# 배경

회사 스터디로 진행을 하게 되었다.

동료가 Three.js를 제안했다.

이때 Three.js 기술을 처음 알았다.

 

 

이건 리액트에 Three.js를 작용시켜보겠습니다.

 

# 설치 방법

yarn add three

 

or

npm install three

 

# 캔버스를 만들어보자

페이지 하나를 만들어서 거기 캔버스를 만들었다.

도화지라고 생각하면 된다.

import {Canvas} from "@react-three/fiber";

const Model = () => {
 return (
     <Canvas width="600" height="600" style={{background:"red"}}></Canvas>
 );
}

export default Model;

 

빨강색이 캔버스이다.

 

# 캔버스안에 구형(공모양)을 띄어보자

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

 

or

yarn add three @react-three/fiber @react-three/drei

 

구를 만들때에는 @react-three/drei 라이브러리를 사용한다. Sphere 컴포넌트를 사용해서 구형을 만들 수 있다.

import { Sphere } from "@react-three/drei";


// Sphere 구를 만드는데 사용한다.
const Circle = () => {
    return (
        <mesh>
            <Sphere args={[1, 32, 32]} position={[0, 0, 0]} />
        </mesh>
    );
};

const Model = () => {
 return (
     <Canvas style={{ width: "400px", height: "400px", background: "red" }}>
         <Circle/>
     </Canvas>
 );
};

 

입체적으로 보이게 하기 위해서는 옵션 값을 설정해야한다.

 

# args={[1, 32, 32]} 설명

1) 반지름 : 구의 크기를 결정한다. 1이니까 반지름이 1인 구이다.

2) 가로 정점 수 : 구의 가로 방향으로 나누어지는 정점의 수 => 클수록 더 부드러운 구가 된다.

3) 세로 정점 수 : 구의 세로 방향으로 나누어지는 정점의 수 => 클수록 더 부르더운 구가 된다.

 

args={[1, 32, 32]}

 

args={[2, 5, 5]}

 

 

# 참조

 

https://github.com/YooGenie/react-study/issues/38

캔버스안에 구형(공모양)을 넣어 보자 · Issue #38 · YooGenie/react-study