usecontrols 2

3D 공간에서의 시야 조정 : 카메라 이동과 시점 변경

Camera 조작 3D 공간에서 카메라의 위치(position)와 시점(lookAt) 조절의 의미 : 사용자의 시각적 경험 결정  Leva를 활용한 카메라 조작 Leva 라이브러리의 useControls를 사용한 카메라 조작npm i leva  useControls를 이용해 카메라의 Z축 위치와 Y축 시점을 조절할 수 있는 슬라이더 생성import { useControls } from "leva";import { useThree } from "@react-three/fiber";const Elements = () => { const { camera } = useThree(); const dirLight = useRef(null); useHelper(dirLight, THREE.DirectionalL..

GUI Controller

GUI(Graphical User Interface) Controller 사용자가 소프트웨어의 기능을 시각적으로 조작할 수 있도록 도와주는 인터페이스예 : 게임에서 클릭할 수 있는 메뉴 버튼/ 설정 패널   Leva 라이브러리 활용 LevaReact 애플리케이션에서 사용 가능한 경량화된 GUI 컨트롤러 라이브러리실시간으로 장면 속성을 조정할 수 있는 인터페이스를 제공 npm i leva useControls 훅을 사용하여 다양한 입력 컨트롤을 쉽게 생성하고 관리할 수 있음장면 내 요소의 속성을 실시간으로 조정 가능코드 몇 줄의 추가로 GUI 패널을 추가할 수 있어 편리  Leva를 활용한 3D 객체 컨트롤 useControls를 이용한 속성 조정const options = useMemo(() => { ..

728x90