From c26ac861254b487e74002e4879482444684a3ac6 Mon Sep 17 00:00:00 2001 From: saurav Date: Sun, 20 Apr 2025 12:58:50 +0530 Subject: [PATCH 1/2] Fix: now the robot head moves in the direction --- src/components/Hero/Robot.tsx | 101 ++++++++++++++++++++++++++++++++++ src/components/Hero/index.tsx | 10 +--- 2 files changed, 103 insertions(+), 8 deletions(-) create mode 100644 src/components/Hero/Robot.tsx diff --git a/src/components/Hero/Robot.tsx b/src/components/Hero/Robot.tsx new file mode 100644 index 0000000..9c0749e --- /dev/null +++ b/src/components/Hero/Robot.tsx @@ -0,0 +1,101 @@ +'use client'; + + + +import Spline from '@splinetool/react-spline'; +import { Application, SPEObject } from '@splinetool/runtime'; +import React, { useEffect, useRef } from 'react'; + +const Robot = () => { + const lookAtRefs = useRef([]); + const containerRef = useRef(null); + + useEffect(() => { + const handleMouseMove = (event: MouseEvent) => { + if (lookAtRefs.current.length === 0) return; + + const container = containerRef.current; + if (container) { + const rect = container.getBoundingClientRect(); + const insideX = event.clientX >= rect.left && event.clientX <= rect.right; + const insideY = event.clientY >= rect.top && event.clientY <= rect.bottom; + if (insideX && insideY) return; + } + + const mouseX = event.clientX; + const mouseY = event.clientY; + + const centerX = window.innerWidth / 2; + const centerY = window.innerHeight / 2; + + const dx = (mouseX - centerX) / centerX; + let dy = (mouseY - centerY) / centerY; + if (dy > 0) dy *= 1.8; // boost when cursor is below + + const maxYRotation = 0.5; + const maxXRotation = 0.5; + + lookAtRefs.current.forEach((obj) => { + obj.rotation.y = dx * maxYRotation; + obj.rotation.x = dy * maxXRotation; + }); + }; + + + const handleMouseLeave = () => { + // Reset rotation when mouse leaves the Spline container + lookAtRefs.current.forEach((obj) => { + obj.rotation.x = 0; + obj.rotation.y = 0; + }); + }; + + const container = containerRef.current; + if (container) { + container.addEventListener('mouseleave', handleMouseLeave); + } + + document.addEventListener('mousemove', handleMouseMove, { passive: true }); + + return () => { + document.removeEventListener('mousemove', handleMouseMove); + if (container) { + container.removeEventListener('mouseleave', handleMouseLeave); + } + }; + }, []); + + const onLoad = (spline: Application) => { + const allObjects = spline.getAllObjects(); + console.log("All objects in scene:", allObjects); + const partNames = ['Head']; // Add more part names here if needed + + lookAtRefs.current = partNames + .map((name) => spline.findObjectByName(name)) + .filter((obj): obj is SPEObject => !!obj); + + if (lookAtRefs.current.length === 0) { + console.warn('No robot parts found in Spline scene'); + } else { + console.log('Tracking parts:', lookAtRefs.current.map((o) => o.name)); + } + }; + + return ( +
+
+ +
+
+ ); +}; + +export default Robot; \ No newline at end of file diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx index 45415ed..435e820 100644 --- a/src/components/Hero/index.tsx +++ b/src/components/Hero/index.tsx @@ -1,6 +1,6 @@ -import Spline from '@splinetool/react-spline/next'; import Link from "next/link"; import "./hero.css"; +import Robot from './Robot'; const Hero = () => { return ( @@ -9,13 +9,7 @@ const Hero = () => { id="home" className="relative overflow-hidden bg-primary pt-[150px] md:pt-[150px] lg:pt-[160px]" > -
-
- -
-
+
From 7c6579e994f2c22037d4bd5b3fba4b9d96cce9da Mon Sep 17 00:00:00 2001 From: saurav Date: Sun, 20 Apr 2025 13:02:24 +0530 Subject: [PATCH 2/2] Added smothness in animation --- src/components/Hero/Robot.tsx | 74 ++++++++++++----------------------- 1 file changed, 25 insertions(+), 49 deletions(-) diff --git a/src/components/Hero/Robot.tsx b/src/components/Hero/Robot.tsx index 9c0749e..a0d6f95 100644 --- a/src/components/Hero/Robot.tsx +++ b/src/components/Hero/Robot.tsx @@ -1,19 +1,17 @@ 'use client'; - - import Spline from '@splinetool/react-spline'; import { Application, SPEObject } from '@splinetool/runtime'; import React, { useEffect, useRef } from 'react'; const Robot = () => { - const lookAtRefs = useRef([]); + const headRef = useRef(null); const containerRef = useRef(null); useEffect(() => { const handleMouseMove = (event: MouseEvent) => { - if (lookAtRefs.current.length === 0) return; - + if (!headRef.current) return; + const container = containerRef.current; if (container) { const rect = container.getBoundingClientRect(); @@ -21,75 +19,53 @@ const Robot = () => { const insideY = event.clientY >= rect.top && event.clientY <= rect.bottom; if (insideX && insideY) return; } - + const mouseX = event.clientX; const mouseY = event.clientY; - + const centerX = window.innerWidth / 2; const centerY = window.innerHeight / 2; - + + // Calculate normalized position (-1 to 1 range) const dx = (mouseX - centerX) / centerX; let dy = (mouseY - centerY) / centerY; - if (dy > 0) dy *= 1.8; // boost when cursor is below - - const maxYRotation = 0.5; - const maxXRotation = 0.5; - - lookAtRefs.current.forEach((obj) => { - obj.rotation.y = dx * maxYRotation; - obj.rotation.x = dy * maxXRotation; - }); - }; - - - const handleMouseLeave = () => { - // Reset rotation when mouse leaves the Spline container - lookAtRefs.current.forEach((obj) => { - obj.rotation.x = 0; - obj.rotation.y = 0; - }); + if (dy > 0) dy *= 1.8; // Enhance downward movement + + const maxRotation = 0.5; + const smoothingFactor = 0.1; // Lower = smoother transition + + // Apply smooth transition + const targetRotationY = dx * maxRotation; + const targetRotationX = dy * maxRotation; + + headRef.current.rotation.y += (targetRotationY - headRef.current.rotation.y) * smoothingFactor; + headRef.current.rotation.x += (targetRotationX - headRef.current.rotation.x) * smoothingFactor; }; - const container = containerRef.current; - if (container) { - container.addEventListener('mouseleave', handleMouseLeave); - } - document.addEventListener('mousemove', handleMouseMove, { passive: true }); return () => { document.removeEventListener('mousemove', handleMouseMove); - if (container) { - container.removeEventListener('mouseleave', handleMouseLeave); - } }; }, []); const onLoad = (spline: Application) => { - const allObjects = spline.getAllObjects(); - console.log("All objects in scene:", allObjects); - const partNames = ['Head']; // Add more part names here if needed - - lookAtRefs.current = partNames - .map((name) => spline.findObjectByName(name)) - .filter((obj): obj is SPEObject => !!obj); - - if (lookAtRefs.current.length === 0) { - console.warn('No robot parts found in Spline scene'); + const head = spline.findObjectByName('Head'); + if (head) { + headRef.current = head; } else { - console.log('Tracking parts:', lookAtRefs.current.map((o) => o.name)); + console.warn('Head not found in Spline scene'); } }; return (
-
+