티스토리 뷰
three.js journey강의를 듣고 작성합니다.
OrbitControls
✏️ 마우스로 3d씬을 줌, 이동할 수 있도록 해주는 카메라 컨트롤러
three.js 의 OrbitControls.js를 쉽게 사용할 수 있도록 한 버전
| enableZoom | 줌 활성화 여부 | true |
| enableRotate | 회전 활성화 여부 | true |
| enablePan | 이동(Pan) 활성화 여부 | true |
| minDistance | 카메라 최소 줌 거리 | 0 |
| maxDistance | 카메라 최대 줌 거리 | Infinity |
| minPolarAngle | 아래쪽 회전 제한 (0이면 하단 완전 제한) | 0 |
| maxPolarAngle | 위쪽 회전 제한 (Math.PI이면 상단 완전 제한) | Math.PI |
| target | 카메라가 바라볼 중심점 | [0, 0, 0] |
makeDefault
orbitcontrols에서 사용되는 카메라 컨트롤을 전역 기본값으로 설정
<OrbitControls makeDefault={true}/>
왜 사용해야하나요?
기본적으로 R3F의 Canvas에는 카메라 컨트롤이 없음.
그래서 OrbitControls 같은 컨트롤을 추가해야 하지만, 다른 컨트롤들과 충돌할 수 있다
👉 makeDefault를 사용하면 전역적으로 controls를 설정해서 충돌을 방지할 수 있음
TransformControls
✏️ 객체를 이동, 최전, 크기조절 할 수 있게 해주는 컨트롤러
import { extend, useFrame, useThree} from "@react-three/fiber";
import { useRef} from "react";
import {OrbitControls, TransformControls} from "@react-three/drei";
const Three = () => {
const cubeRef = useRef()
useFrame((state, delta)=>{
cubeRef.current.rotation.y += delta
})
return (
<>
//두가지 방법 다 사용가능
<TransformControls object={cubeRef} mode="translate"> obgect에 속성 추가, mode추가해서 쓰면 됨
<mesh ref={cubeRef} position-x={1} scale={1.5} >
<boxGeometry/>
<meshStandardMaterial color="pink"/>
</mesh>
</TransformControls>
<mesh ref={cubeRef} position-x={1} scale={1.5} >
<boxGeometry/>
<meshStandardMaterial color="pink"/>
</mesh>
<TransformControls object={cubeRef} mode="translate"/>
</>
);
};
export default Three;
🤓 사용법
- 조작할 mesh에 ref를 연결하고 transformControls 에는 object로 속성에 추가하면 된다 !
- 3가지 mode가 있다 translate(이동), rotate(회전), scale(크기조절)
🤚 기즈모 이것 뭐예요?
- 3D에서 이동, 최전, 크기 조절을 시각적으로 표시해주는 도구
PivotControls
✏️ 객체를 회전, 이동 , 크기조절 할때 중심축을 기준으로 조작하는 컨트롤
<PivotControls
anchor={[0,0,0]}
depthTest={false}
>
<mesh ref={sphere} position-x={-2.5}>
<sphereGeometry/>
<meshStandardMaterial />
<Html
position={[1,1,0]}
wrapperClass="label"
center
distanceFactor={8}
occlude={[sphere, cubeRef]}
>
test
</Html>
</mesh>
</PivotControls>
🤓 사용법
- PivotControls 안에 mesh를 감싸면됨
| anchor | 회전 중심점 변경 | [0, 1, 0] |
| scale | 컨트롤 UI 크기 조절 | scale={0.5} |
| onDrag | 객체가 움직일 때 이벤트 실행 | onDrag={(e) => console.log(e.target.position)} |
| onDragStart | 조작 시작 시 실행 | onDragStart={() => console.log('Start!')} |
| onDragEnd | 조작 종료 시 실행 | onDragEnd={() => console.log('End!')} |
Html
✏️ html요소를 렌더링할 수 있도록 해주는 기능 (3d객체위에 버튼, 텍스트, 이미지)
어떤 오브젝트쓰리디 다 넣을수있
Text
✏️ 3d 텍스트 생성
<Text
fontSize={0.5} //폰트 사이즈
depth={0.2} //텍스트 입체저긍로 보임
fontWeight="bold" //폰트 굵기
position={[1,2,2]} //텍스트 위치
rotation={[0, Math.PI / 4, 0]} //텍스트회전
>TEST ~_~
</Text>
🤚 SDF 이것 뭐예요?
- Signed Distance Function로 점과 도형의 거리를 반환하는 함수 이다
Float
✏️ 풍선처럼 부유할 수 있는 애니메이션
| speed | 움직이는 속도 (기본값: 1) | speed={2} |
| rotationIntensity | 회전 강도 (기본값: 1) | rotationIntensity={1.5} |
| floatIntensity | 위아래 이동 강도 (기본값: 1) | floatIntensity={2} |
| floatingRange | 떠다니는 범위 설정 | floatingRange={[0, 1]} |
MeshReflectorMaterial
✏️ 반사효과만들어주는 머터리얼