How to Character and Camera and Object Follow Give Path In R3f

[@paradise_hope]

import React, { useEffect, useRef, useState } from 'react';
import { useFrame } from '@react-three/fiber';
import { useGLTF } from '@react-three/drei';
import * as THREE from 'three';
import Charater from '../../assets/Character/Character.glb';
function Model({ position }) {
const groupRef = useRef(); // Reference for the group
const timeRef = useRef(0); // Mutable time reference to avoid unnecessary state updates
const { scene } = useGLTF(Charater); // Load the GLTF model
const [curve] = useState(() => {
const points = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(2, 1, 0),
new THREE.Vector3(4, 0, 0),
new THREE.Vector3(6, -1, 2),
new THREE.Vector3(8, 0, 4),
];
return new THREE.CatmullRomCurve3(points, true); // 'true' to make it closed
});
useFrame((_, delta) => {
if (groupRef.current) {
// Update the time for smooth animation
timeRef.current = (timeRef.current + delta * 0.1) % 1;
// Get position and tangent from the curve
const position = curve.getPointAt(timeRef.current);
const tangent = curve.getTangentAt(timeRef.current).normalize();
// Update the character's position
groupRef.current.position.set(position.x, position.y, position.z);
// Calculate quaternion for rotation
const up = new THREE.Vector3(0, 1, 0); // Stable up direction
const quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors(up, tangent); // Rotate to align with the tangent
groupRef.current.setRotationFromQuaternion(quaternion);
}
});
return (
{/* Visualize the path */}


{/* Attach the loaded GLTF model */}


);
}
export default Model;

[@paradise_hope]

import React, { useRef, useState, useEffect } from 'react';
import * as THREE from 'three';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
// Path Follower Component
export default function PathFollowerObject() {
const meshRef = useRef(); // Reference to the object
const [curve] = useState(() => {
// Define a path using CatmullRomCurve3
const points = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(2, 1, 0),
new THREE.Vector3(4, 0, 0),
new THREE.Vector3(6, -1, 2),
new THREE.Vector3(8, 0, 4),
];
return new THREE.CatmullRomCurve3(points, true); // 'true' to make it closed
});
const [time, setTime] = useState(0); // Time value to control animation speed
useFrame((_, delta) => {
if (meshRef.current) {
// Update time based on delta for smooth animation
const nextTime = (time + delta * 0.1) % 1; // Loop time between 0 and 1
setTime(nextTime);
// Get the position on the curve at the current time
const position = curve.getPointAt(nextTime);
meshRef.current.position.set(position.x, position.y, position.z);
// Get the tangent for orientation
const tangent = curve.getTangentAt(nextTime);
const axis = new THREE.Vector3(0, 1, 0); // Up vector
const quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors(axis, tangent.normalize());
meshRef.current.quaternion.slerp(quaternion, 0.2); // Smooth rotation
}
});
return (
{/* Visualize the curve as a line */}


{/* Object to follow the path */}


);
}

[@paradise_hope]

export default function PathFollowerCamera() {
const cameraRef = useRef(); // Reference to the camera
const [curve] = useState(() => {
// Define a path using CatmullRomCurve3
const points = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(2, 1, 0),
new THREE.Vector3(4, 0, 0),
new THREE.Vector3(6, -1, 2),
new THREE.Vector3(8, 0, 4),
];
return new THREE.CatmullRomCurve3(points, true); // 'true' to make it closed
});
const [time, setTime] = useState(0); // Time value to control animation speed
const { camera } = useThree(); // Access the Three.js camera
useFrame((_, delta) => {
if (cameraRef.current) {
// Update time based on delta for smooth animation
const nextTime = (time + delta * 0.1) % 1; // Loop time between 0 and 1
setTime(nextTime);
// Get the position on the curve at the current time
const position = curve.getPointAt(nextTime);
camera.position.set(position.x, position.y, position.z);
// Get the tangent for orientation
const tangent = curve.getTangentAt(nextTime);
const up = new THREE.Vector3(0, 1, 0); // Up vector
const lookAt = new THREE.Vector3().copy(position).add(tangent); // Look in the direction of the tangent
camera.lookAt(lookAt);
}
});
return (
{/* Visualize the curve as a line */}


{/* Attach a camera to follow the path */}

);
}