diff --git a/src/App.tsx b/src/App.tsx index f4ca037..18eb752 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,24 +17,27 @@ const Room = () => { const room = useLoader(FBXLoader, "/room.fbx"); const [focus, setFocus] = useState(null); - const [cameraData, setCameraData] = useState<{ - position: Vector3; - target: Vector3; - } | null>(null); + const cameraPosition = useRef(null); + const cameraTarget = useRef(new Vector3(0, 1, 0)); const { camera } = useThree(); useFrame(() => { if (!controls.current) return; - if (cameraData) { - camera.position.lerp(cameraData.position, 0.09); - controls.current.target.lerp(cameraData.target, 0.09); + if (cameraPosition.current) { + camera.position.lerp(cameraPosition.current, 0.09); + if (camera.position.distanceTo(cameraPosition.current) < 0.012) { + if (!focus) { + controls.current.enableZoom = true; + controls.current.enableRotate = true; + } - if (camera.position.distanceTo(cameraData.position) < 0.01) { - setCameraData(null); + cameraPosition.current = null; } } + + controls.current.target.lerp(cameraTarget.current, 0.1); }); const handleClick = (e: ThreeEvent) => { @@ -48,22 +51,18 @@ const Room = () => { e.object.getWorldPosition(objectPos); e.object.getWorldDirection(objectDir); - setCameraData({ - position: objectPos.clone().add(objectDir.multiplyScalar(-0.65)), - target: objectPos, - }); + cameraPosition.current = objectPos + .clone() + .add(objectDir.multiplyScalar(-0.65)); + cameraTarget.current = objectPos; controls.current.enableZoom = false; controls.current.enableRotate = false; setFocus(e.object.name); } else if (focus) { - controls.current.enableZoom = true; - controls.current.enableRotate = true; - setCameraData({ - position: new Vector3(3, 3, -3), - target: new Vector3(0, 1, 0), - }); + cameraPosition.current = new Vector3(3, 3, -3); + cameraTarget.current = new Vector3(0, 1, 0); setFocus(null); } @@ -80,7 +79,6 @@ const Room = () => { target={[0, 1, 0]} maxPolarAngle={Math.PI / 2} enablePan={false} - onStart={() => setCameraData(null)} />