feat: added task 3 in r3f

Week-2/Task-3/r3f/src/App.jsx

@@ -1,6 +1,177 @@
 
-export default function App() {
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Canvas, useFrame, useThree } from '@react-three/fiber'
+import * as THREE from 'three'
+
+const STEPS = [
+    {
+        label: 'Step 1: Focus on object A',
+        detail: 'Camera frames object A only.',
+        cameraPosition: [0, 1.4, 5],
+        lookAt: [-1.2, 0, 0],
+        a: { position: [-1.2, 0, 0], rotation: [0, 0.25, 0], visible: true },
+        b: { position: [1.4, 0, 0], rotation: [0, 0, 0], visible: false },
+    },
+    {
+        label: 'Step 2: Move camera + reveal object B',
+        detail: 'Camera shifts right and object B becomes visible.',
+        cameraPosition: [2.2, 1.4, 5],
+        lookAt: [1.4, 0, 0],
+        a: { position: [-1.2, 0, 0], rotation: [0.2, 0.8, 0], visible: true },
+        b: { position: [1.4, 0, 0], rotation: [0, 0.2, 0], visible: true },
+    },
+    {
+        label: 'Step 3: Final combined scene',
+        detail: 'Both objects stay visible in one balanced view.',
+        cameraPosition: [0.3, 2.2, 7],
+        lookAt: [0, 0, 0],
+        a: { position: [-1.5, 0, 0], rotation: [0.3, 1.1, 0], visible: true },
+        b: { position: [1.5, 0, 0], rotation: [0.1, 0.6, 0], visible: true },
+    },
+]
+
+function GuidedScene({ stepIndex }) {
+    const { camera } = useThree()
+    const objectARef = useRef()
+    const objectBRef = useRef()
+    const initializedRef = useRef(false)
+
+    const targets = useMemo(
+        () => ({
+            cameraPosition: new THREE.Vector3(),
+            cameraLookAt: new THREE.Vector3(),
+            lookCurrent: new THREE.Vector3(),
+            aPosition: new THREE.Vector3(),
+            aRotation: new THREE.Euler(),
+            bPosition: new THREE.Vector3(),
+            bRotation: new THREE.Euler(),
+        }),
+        []
+    )
+
+    useEffect(() => {
+        const step = STEPS[stepIndex]
+
+        targets.cameraPosition.set(...step.cameraPosition)
+        targets.cameraLookAt.set(...step.lookAt)
+
+        targets.aPosition.set(...step.a.position)
+        targets.aRotation.set(...step.a.rotation)
+
+        targets.bPosition.set(...step.b.position)
+        targets.bRotation.set(...step.b.rotation)
+
+        if (objectARef.current) objectARef.current.visible = step.a.visible
+        if (objectBRef.current) objectBRef.current.visible = step.b.visible
+
+        if (!initializedRef.current && objectARef.current && objectBRef.current) {
+            camera.position.copy(targets.cameraPosition)
+            targets.lookCurrent.copy(targets.cameraLookAt)
+            objectARef.current.position.copy(targets.aPosition)
+            objectARef.current.rotation.copy(targets.aRotation)
+            objectBRef.current.position.copy(targets.bPosition)
+            objectBRef.current.rotation.copy(targets.bRotation)
+            initializedRef.current = true
+        }
+    }, [camera, stepIndex, targets])
+
+    useFrame(() => {
+        if (!objectARef.current || !objectBRef.current) return
+
+        objectARef.current.position.lerp(targets.aPosition, 0.1)
+        objectBRef.current.position.lerp(targets.bPosition, 0.1)
+
+        objectARef.current.rotation.x += (targets.aRotation.x - objectARef.current.rotation.x) * 0.1
+        objectARef.current.rotation.y += (targets.aRotation.y - objectARef.current.rotation.y) * 0.1
+        objectARef.current.rotation.z += (targets.aRotation.z - objectARef.current.rotation.z) * 0.1
+
+        objectBRef.current.rotation.x += (targets.bRotation.x - objectBRef.current.rotation.x) * 0.1
+        objectBRef.current.rotation.y += (targets.bRotation.y - objectBRef.current.rotation.y) * 0.1
+        objectBRef.current.rotation.z += (targets.bRotation.z - objectBRef.current.rotation.z) * 0.1
+
+        camera.position.lerp(targets.cameraPosition, 0.08)
+        targets.lookCurrent.lerp(targets.cameraLookAt, 0.08)
+        camera.lookAt(targets.lookCurrent)
+    })
+
     return (
-        <></>
+        <>
+            <ambientLight intensity={0.8} />
+            <directionalLight intensity={1} position={[3, 4, 5]} />
+
+            <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.8, 0]}>
+                <planeGeometry args={[12, 12]} />
+                <meshStandardMaterial color="#dbe6f3" roughness={0.95} />
+            </mesh>
+
+            <mesh ref={objectARef}>
+                <boxGeometry args={[1.2, 1.2, 1.2]} />
+                <meshStandardMaterial color="#2a9d8f" />
+            </mesh>
+
+            <mesh ref={objectBRef}>
+                <sphereGeometry args={[0.7, 32, 32]} />
+                <meshStandardMaterial color="#e76f51" />
+            </mesh>
+        </>
+    )
+}
+
+export default function App() {
+    const [stepIndex, setStepIndex] = useState(0)
+    const step = STEPS[stepIndex]
+
+    useEffect(() => {
+        function onKeyDown(event) {
+            if (event.key === '1') setStepIndex(0)
+            if (event.key === '2') setStepIndex(1)
+            if (event.key === '3') setStepIndex(2)
+            if (event.key === 'ArrowLeft') setStepIndex((value) => Math.max(value - 1, 0))
+            if (event.key === 'ArrowRight') setStepIndex((value) => Math.min(value + 1, STEPS.length - 1))
+        }
+
+        window.addEventListener('keydown', onKeyDown)
+        return () => window.removeEventListener('keydown', onKeyDown)
+    }, [])
+
+    return (
+        <div className="app-shell">
+            <div id="guide">
+                <h2>Step Guided Flow</h2>
+                <p id="step-label">{step.label}</p>
+                <p id="step-detail">{step.detail}</p>
+
+                <div className="row">
+                    {STEPS.map((_, index) => (
+                        <button
+                            key={index}
+                            className={`step-btn ${stepIndex === index ? 'active' : ''}`}
+                            onClick={() => setStepIndex(index)}
+                        >
+                            Step {index + 1}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="row">
+                    <button onClick={() => setStepIndex((value) => Math.max(value - 1, 0))} disabled={stepIndex === 0}>
+                        Previous
+                    </button>
+                    <button
+                        onClick={() => setStepIndex((value) => Math.min(value + 1, STEPS.length - 1))}
+                        disabled={stepIndex === STEPS.length - 1}
+                    >
+                        Next
+                    </button>
+                </div>
+
+                <p id="hint">Use buttons or keys 1, 2, 3.</p>
+            </div>
+
+            <Canvas camera={{ fov: 55, near: 0.1, far: 100, position: [0, 1.4, 5] }}>
+                <color attach="background" args={['#eaf0f7']} />
+                <GuidedScene stepIndex={stepIndex} />
+            </Canvas>
+        </div>
     )
 }

Week-2/Task-3/r3f/src/index.css

@@ -8,11 +8,94 @@ body,
 
 body {
     overflow: hidden;
-    background: #101418;
+    background: #eaf0f7;
+    font-family: "Avenir Next", "Segoe UI", sans-serif;
 }
 
 canvas {
     display: block;
     width: 100%;
     height: 100%;
+}
+
+.app-shell {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+#guide {
+    position: fixed;
+    top: 14px;
+    left: 14px;
+    z-index: 10;
+    max-width: 290px;
+    background: rgba(255, 255, 255, 0.88);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+#guide h2 {
+    margin: 0;
+    font-size: 14px;
+    color: #203448;
+}
+
+#step-label {
+    margin: 0;
+    font-size: 13px;
+    font-weight: 700;
+    color: #1b2530;
+}
+
+#step-detail {
+    margin: 0;
+    font-size: 12px;
+    color: #4f647a;
+    line-height: 1.35;
+}
+
+.row {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+button {
+    border: 1px solid #cfd8e3;
+    background: #fff;
+    color: #203448;
+    border-radius: 8px;
+    padding: 7px 9px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+button:hover {
+    border-color: #8ea2b8;
+    transform: translateY(-1px);
+}
+
+button.step-btn.active {
+    background: #203448;
+    border-color: #203448;
+    color: #f4f8fb;
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+#hint {
+    margin: 0;
+    font-size: 11px;
+    color: #566f86;
 }