[Three.js] 캔버스안에 구형(공모양)을 3D로 만들어보자

 

 

 

 

# 이전글

2024.02.21 - [Study/자바스크립트] - [Three.js] 캔버스안에 구형(공모양)을 넣어 보자

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

 

 

이전 글에서는 그냥 원으로만 보였다.

입체적으로 보이게 하기 위해서

빛을 줘야한다.

 

 

#  3D 구형 만들기

const Circle = () => {
    return (
        <>
        <ambientLight intensity={0.25} />
        <directionalLight color="white" position={[10, 10, 10]} />
        <mesh>
            <sphereGeometry args={[1, 32, 32]} />
            <meshStandardMaterial color="yellow" />
        </mesh>
        </>
    );
};

 

ambientLight : 주변 광 추가 

directionalLight : 방향광 추가

sphereGeometry: 반지름 1이고 가로, 세로 세그먼트가 32이이다.

meshStandardMaterial : 재질을 나타낸다.

 

 

3D 구형 만들기 완성본

 

 

 

이렇게 빛을 주고 재질도 색도 주니까 

3D 구형이 만들어졌다.

 

코드를 살짝 수정했다.

<ambientLight intensity={0.9} />

intensity 값을 변경했다. 

숫자를 낮추면 어두워지고

숫자를 높이면 밝아진다.

 

예를 들어서

위 그림을 보면 0.25라서 어둡고 아래 그림은 0.9라서 밝다.

 

---

# meshStandardMaterial 옵션

- color : 물체의 기본 색상

- roughness: 표면의 거칠기 => 값이 낮을수록 표면이 매끄럽고, 높을수록 거칠어집니다.

roughness={1}

 

roughness={0}

- metalness : 물체의 금속성 여부 => 0이면 비금속, 1이면 완전한 금속

metalness={0.1}

 

metalness={1}

 

 

---

 

생각보다 수학적인 요소가 많아서 원하는 형태로 만들기가 힘들었다.

 

또 이렇게 하다가 느낀 것은

개발자가 이렇게 디자인을 하는게 맞나 라는 생각이 들었다.

3D 모형을 움직이게 하거나 이벤트를 주는 게 개발자의 영역이고

이 모형을 만들어 주는건 디자이너들이 하지 않을까

 

그래서 3D 모형을 가져와서 이벤트를 주는걸 공부해야겠다.

다음에는 3D 모형을 불러 오는 방법을 공부해보자!

 

 

 

 

 

# 참조

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

캔버스안에 구형(공모양)을 3D로 만들어보자 · Issue #43 · YooGenie/react-study