[Three.js] 3D 물체를 마우스로 움직이게 한다

 

 

 

3D 물체를 마우스로 움직이게 할 수 있다. 

그걸 하기 위해서 코드를 작성해봤다.

 

<OrbitControls />

 

이 코드를 넣으면

마우스나 터치 입력을 사용하여

3D를 자유롭게 회전하고 이동할 수 있습니다.

 

# 코드

const Sphere = () => {
    return (
        <>
            <OrbitControls />
            <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>
        </>
    );
};

 

 

코드를 작성하면

아래 동영상처럼 

3D 물체가 자유롭게 움직인다.

 

 

 

 

 

 

# 참조 이슈

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

3D 물체를 마우스로 움직이게 한다 · Issue #47 · YooGenie/react-study