Basic intro - Animation is Hard AF

DanielYuki · Dec 27, 2023 · ef3f230 · ef3f230
1 parent a107c15
commit ef3f230
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 27 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,18 +1,42 @@
-import { useState } from "react";
-import { Leva } from "leva";
+import { useState, useEffect } from "react";
+import { Leva, useControls } from "leva";
+import { gsap } from "gsap";
 
 import EarthCanva from "./Components/Earth";
 // import StarsCanva from "./Components/Stars";
 
 function App() {
+    const [{ isShowing }, set] = useControls("Text", () => ({
+        isShowing: {
+            value: true,
+        },
+    }));
+
+    useEffect(() => {
+        gsap.fromTo(
+            ".meh-transition",
+            { opacity: 0, scale: 0.25 },
+            {
+                opacity: isShowing ? 1 : 0,
+                scale: isShowing ? 1 : 0.25,
+                duration: 1.25,
+                delay: 2.75,
+                ease: "power2.inOut",
+            }
+        );
+    }, [isShowing]);
+
     return (
         <div className="flex h-[100vh] w-[100vw] justify-center items-center">
             <Leva collapsed={true} hidden={false} />
-            {/* <h1 className="absolute pointer-events-none select-none mb-10 tracking-[1rem] text-[18rem] z-10 font-extrabold text-white">
+            <h1
+                className={`meh-transition absolute pointer-events-none select-none mb-4 sm:mb-10 tracking-[1rem] text-[8rem] sm:text-[18rem] z-10 font-extrabold text-white`}
+            >
                 世界
-            </h1> */}
-			<EarthCanva />
-			{/* <StarsCanva /> */}
+            </h1>
+
+            <EarthCanva />
+            {/* <StarsCanva /> */}
         </div>
     );
 }

diff --git a/src/Components/Camera.jsx b/src/Components/Camera.jsx
@@ -0,0 +1,85 @@
+import { useThree, useFrame } from "@react-three/fiber";
+import { useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import { useControls, button } from "leva";
+import { OrbitControls } from "@react-three/drei";
+
+export default function Camera() {
+    const cameraRef = useRef();
+
+    const { camera } = useThree();
+
+    const animDuration = 3;
+
+    useEffect(() => {
+        cameraRef.current.enabled = false;
+
+        gsap.to(camera.position, {
+            x: 0,
+            y: 0,
+            z: 5,
+            duration: animDuration,
+            ease: "power2.inOut",
+            onUpdate: () => {
+                camera.lookAt(0, 0, 0);
+            },
+            onComplete: () => {
+                cameraRef.current.enabled = true;
+            },
+        });
+    }, []);
+
+    useControls("Camera", {
+        anim1: button(() => {
+            cameraRef.current.enabled = false;
+
+            gsap.to(camera.position, {
+                x: -5,
+                y: 2,
+                z: -5,
+                duration: animDuration,
+                ease: "power2.inOut",
+                onUpdate: () => {
+                    camera.lookAt(0, 0, 0);
+                },
+                onComplete: () => {
+                    cameraRef.current.enabled = true;
+                },
+            });
+        }),
+        reset: button(() => {
+            cameraRef.current.enabled = false;
+
+            gsap.to(camera.position, {
+                x: 0,
+                y: 0,
+                z: 5,
+                duration: animDuration,
+                ease: "power2.inOut",
+                onUpdate: () => {
+                    camera.lookAt(0, 0, 0);
+                },
+                onComplete: () => {
+                    cameraRef.current.enabled = true;
+                },
+            });
+        }),
+    });
+
+    return (
+        <group>
+            <OrbitControls
+                ref={cameraRef}
+                target={[0, 0, 0]}
+                // autoRotate
+                // autoRotateSpeed={0.75}
+                // enableZoom={false}
+                minDistance={3}
+                maxDistance={25}
+                enablePan={false}
+                maxPolarAngle={(Math.PI * 2) / 3}
+                minPolarAngle={Math.PI / 3}
+            />
+        </group>
+    );
+}
diff --git a/src/Components/CanvasLoader.jsx b/src/Components/CanvasLoader.jsx
@@ -1,14 +1,20 @@
-import { Html, useProgress } from '@react-three/drei';
+import { Html, useProgress } from "@react-three/drei";
 
 export default function CanvasLoader() {
     const { progress } = useProgress();
 
     return (
         <Html center>
-            <img src="/icon512.png" alt="Earth Placeholder" />
-            <h1 className=" text-white mt-4">
-                LOADING... {progress.toFixed(2)}%
-            </h1>
+            <div className="flex justify-center items-center z-20 h-screen w-screen flex-col bg-slate-950">
+                <img
+                    className="h-32 sm:h-64 w-32 sm:w-64"
+                    src="/icon512.png"
+                    alt="Earth Placeholder"
+                />
+                <h1 className="text-white mt-2 sm:mt-4 text-xl sm:text-2xl">
+                    LOADING... {progress.toFixed(2)}%
+                </h1>
+            </div>
         </Html>
-    )
-}
+    );
+}
diff --git a/src/Components/Earth.jsx b/src/Components/Earth.jsx
@@ -8,6 +8,7 @@ import { gsap } from "gsap";
 import CanvasLoader from "./CanvasLoader";
 import Stars from "./Stars";
 import Sun from "./Sun";
+import Camera from "./Camera";
 
 import earthVertexShader from "../assets/Shaders/earthVertex.glsl";
 import earthFragmentShader from "../assets/Shaders/earthFragment.glsl";
@@ -23,9 +24,14 @@ const Earth = () => {
     // );
     // const oceanMap = useLoader(TextureLoader, "/OceanMapV3.jpg");
 
-    const [earthTexture, earthBumpMap, earthTextureNight, oceanMap, cloudMap] = useLoader(TextureLoader, [
-        "/EarthTexture.jpg", "/EarthBumpMap.jpg", "/EarthTextureNight.jpg", "/OceanMapV3.jpg", "/CloudMap.jpg"
-    ]);
+    const [earthTexture, earthBumpMap, earthTextureNight, oceanMap, cloudMap] =
+        useLoader(TextureLoader, [
+            "/EarthTexture.jpg",
+            "/EarthBumpMap.jpg",
+            "/EarthTextureNight.jpg",
+            "/OceanMapV3.jpg",
+            "/CloudMap.jpg",
+        ]);
 
     const earthRef = useRef();
     const groupRef = useRef();
@@ -96,7 +102,7 @@ const Earth = () => {
     );
 };
 
-const Clouds = ({cloudsTexture}) => {
+const Clouds = ({ cloudsTexture }) => {
     // const cloudsTexture = useLoader(TextureLoader, "/CloudMap.jpg");
     const cloudsRef = useRef();
 
@@ -138,7 +144,7 @@ export default function EarthCanva() {
         <Canvas
             // frameloop="demand"
             shadows
-            camera={{ position: [0, 0, 5], fov: 45 }}
+            camera={{ position: [100, 0, 50], fov: 45 }} //initial position
             gl={{ preserveDrawingBuffer: true }}
         >
             <Suspense fallback={<CanvasLoader />}>
@@ -158,15 +164,8 @@ export default function EarthCanva() {
             </Suspense>
 
             <Preload all />
-            <OrbitControls
-                // autoRotate
-                // autoRotateSpeed={0.75}
-                enableZoom={false}
-                enablePan={false}
-                maxPolarAngle={(Math.PI * 2) / 3}
-                minPolarAngle={Math.PI / 3}
-            />
-            <Stats />
+            <Camera />
+            {/* <Stats /> */}
         </Canvas>
     );
 }