[three.js] 캔버스 안에 정육면체도 넣어보자

 

# 배경

지난 번에는 구형을 만들어봤다.

조금 아쉬워서 정육면체 만들어 봤다.

 

 

# 정육면체 만들기

const Sphere = () => {
    return (
        <>
            <ambientLight intensity={0.75} />
            <directionalLight color="white" position={[10, 10, 10]} />
            <mesh rotation={[Math.PI / 180 * 30, 20, 0]}>
                <boxGeometry args={[3, 3, 3]} />
                <meshStandardMaterial color="pink" />
            </mesh>
        </>
    );
};

 

 

위에 코드를 캔버스에 넣으면

 

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

 );
};

 

아래 그림처럼 나타난다.

 

정육면체 3D

 

 

정육면체를 만들었습니다.

그럼 직육면체도 만들수 있습니다.

 

 

# 직육면체를 만든 방법

      <boxGeometry args={[1, 3, 3]} />

 

x, y, z 축이다. 숫자만 다르게 해주면 직육면체가 된다.

직육면체 3D

 

---

다음에는 마우스으로 3D 물체를 움직이게 만드는 방법을 해보겠습니다.