etc: camera조정

fov조절 orbitcontrols 이동, 확대축소 막음 Co-authored-by: Mina Seo <[email protected]>
boostcampwm2023 · Dec 7, 2023 · 6ca1405 · 6ca1405
1 parent 417a6c9
commit 6ca1405
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx b/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx
@@ -34,14 +34,15 @@ const SnowGlobeCanvas = React.memo<SnowGlobeCanvasProps>(
         <CanvasContainer>
           <Canvas
             camera={{
-              position: [25, 2, 0]
+              position: [25, 2, 0],
+              fov: 100
             }}
             shadows={true}
           >
             <OrbitControls
               target={new THREE.Vector3(0, 2, 0)}
-              enablePan={true}
-              enableZoom={true}
+              enablePan={false}
+              enableZoom={false}
               maxPolarAngle={Math.PI / 2}
               minPolarAngle={0}
             />

diff --git a/front/src/components/SnowGlobeCanvas/models/MainDeco.tsx b/front/src/components/SnowGlobeCanvas/models/MainDeco.tsx
@@ -54,6 +54,10 @@ const MainDeco = ({ id, scale, position, color }: MyModelProps) => {
   colorPart.material = makeColorChangedMaterial(colorPart, color);
 
   useFrame((_, delta) => {
+    //이거 1초에 1프레임도 안나오면 메인장식 멈출수도있음
+    if (delta > 1) {
+      delta = 0;
+    }
     if (!isStoppedRef.current) {
       fallingModel(deco, speedRef, delta, isStoppedRef);
     }

diff --git a/front/src/components/SnowGlobeCanvas/models/Raycaster.tsx b/front/src/components/SnowGlobeCanvas/models/Raycaster.tsx
@@ -18,15 +18,13 @@ const Raycaster: React.FC<RaycasterProps> = ({ isClickedRef }) => {
 
   useFrame((_, delta) => {
     const isClicked = isClickedRef.current;
-    const zoomInSpeed = 1 - delta * 2;
     const zoomOutSpeed = 1 + delta * 2;
     if (isAnimating.current) {
       if (isClicked && !isZoom) {
+        const targetPosition = new THREE.Vector3(0, 3.5, 0);
         setView(true);
-        if (camera.position.distanceTo(new THREE.Vector3(0, 3.5, 0)) > 7) {
-          camera.position.x = camera.position.x * zoomInSpeed;
-          camera.position.y = camera.position.y * zoomInSpeed;
-          camera.position.z = camera.position.z * zoomInSpeed;
+        if (camera.position.distanceTo(targetPosition) > 6.5) {
+          camera.position.lerp(targetPosition, delta * 2);
         } else {
           isAnimating.current = false;
         }