[V0_FILE]typescriptreact:file="app/page.tsx" import ThirdPerson from '@/components/third-person' export default function Home() { return ( ) } [V0_FILE]typescriptreact:file="components/third-person.tsx" isMoved="true" "use client" import { useRef, useState, useEffect, Suspense } from 'react' import { Canvas, useFrame, useThree, useLoader } from '@react-three/fiber' import * as THREE from 'three' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' function resetBoneScales(object) { object.traverse((node) => { if (node.isBone) { node.scale.set(1, 1, 1) } }) } function Character({ position, rotation, isMoving }) { const group = useRef() const [error, setError] = useState(null) const [characterLoaded, setCharacterLoaded] = useState(false) const [animationsLoaded, setAnimationsLoaded] = useState(false) const characterGltf = useLoader(GLTFLoader, 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ybot-ZdlE22y9EOO9IhNHYx9xoyhHV8zrH5.glb', undefined, (error) => { console.error('Error loading character model:', error) setError('Failed to load character model') } ) const walkAnimationGltf = useLoader(GLTFLoader, 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/walking4-FC1B5O8rz7de2Syk4KyoT7KvtZVafb.glb', undefined, (error) => { console.error('Error loading walk animation:', error) setError('Failed to load walk animation') } ) const idleAnimationGltf = useLoader(GLTFLoader, 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/idle-lReXO7KXnOVoSQhCJ5Vst5c0j0jZku.glb', undefined, (error) => { console.error('Error loading idle animation:', error) setError('Failed to load idle animation') } ) const mixerRef = useRef() const actionsRef = useRef({}) useEffect(() => { if (characterGltf && characterGltf.scene && walkAnimationGltf && idleAnimationGltf) { console.log('Character and animations loaded') setCharacterLoaded(true) try { // Reset the character's scale characterGltf.scene.scale.set(1, 1, 1) resetBoneScales(characterGltf.scene) // Create a new animation mixer const mixer = new THREE.AnimationMixer(characterGltf.scene) mixerRef.current = mixer // Create animation actions const idleAction = mixer.clipAction(idleAnimationGltf.animations[0]) const walkAction = mixer.clipAction(walkAnimationGltf.animations[0]) // Store actions in the ref actionsRef.current = { idle: idleAction, walk: walkAction } // Start playing the idle animation idleAction.play() setAnimationsLoaded(true) } catch (error) { console.error('Error setting up character or animations:', error) setError(`Failed to set up character or animations: ${error.message}`) } } }, [characterGltf, walkAnimationGltf, idleAnimationGltf]) useEffect(() => { if (animationsLoaded) { const { idle, walk } = actionsRef.current if (isMoving) { idle.fadeOut(0.5) walk.reset().fadeIn(0.5).play() } else { walk.fadeOut(0.5) idle.reset().fadeIn(0.5).play() } } }, [isMoving, animationsLoaded]) useFrame((state, delta) => { if (mixerRef.current && characterGltf && characterGltf.scene) { resetBoneScales(characterGltf.scene) mixerRef.current.update(delta) resetBoneScales(characterGltf.scene) } }) if (!characterLoaded || !animationsLoaded) { return } return ( {error && ( )} ) } function Scene() { const [characterPosition, setCharacterPosition] = useState([0, 0, -1]) const [characterRotation, setCharacterRotation] = useState([0, Math.PI, 0]) const [isMoving, setIsMoving] = useState(false) const { camera, gl } = useThree() const [isLocked, setIsLocked] = useState(false) const [cameraAngle, setCameraAngle] = useState({ x: 0, y: 0 }) const keysPressed = useRef({}) const characterVelocity = useRef(new THREE.Vector3()) useEffect(() => { const handleKeyDown = (event) => { keysPressed.current[event.key.toLowerCase()] = true } const handleKeyUp = (event) => { keysPressed.current[event.key.toLowerCase()] = false } window.addEventListener('keydown', handleKeyDown) window.addEventListener('keyup', handleKeyUp) return () => { window.removeEventListener('keydown', handleKeyDown) window.removeEventListener('keyup', handleKeyUp) } }, []) useEffect(() => { const handleMouseMove = (event) => { if (isLocked) { setCameraAngle(prev => ({ x: Math.max(-Math.PI / 2, Math.min(Math.PI / 2, prev.x - event.movementY * 0.002)), y: prev.y - event.movementX * 0.002 })) } } const handleClick = () => { if (!isLocked) { gl.domElement.requestPointerLock() } } const handlePointerLockChange = () => { setIsLocked(document.pointerLockElement === gl.domElement) } gl.domElement.addEventListener('click', handleClick) document.addEventListener('mousemove', handleMouseMove) document.addEventListener('pointerlockchange', handlePointerLockChange) return () => { gl.domElement.removeEventListener('click', handleClick) document.removeEventListener('mousemove', handleMouseMove) document.removeEventListener('pointerlockchange', handlePointerLockChange) } }, [isLocked, gl]) useFrame((state, delta) => { const speed = 5 const drag = 0.9 const direction = new THREE.Vector3() if (keysPressed.current['w']) direction.z -= 1 if (keysPressed.current['s']) direction.z += 1 if (keysPressed.current['a']) direction.x -= 1 if (keysPressed.current['d']) direction.x += 1 direction.normalize() direction.applyEuler(new THREE.Euler(0, cameraAngle.y, 0)) characterVelocity.current.add(direction.multiplyScalar(speed * delta)) characterVelocity.current.multiplyScalar(drag) const newPosition = [ characterPosition[0] + characterVelocity.current.x, characterPosition[1], characterPosition[2] + characterVelocity.current.z ] setCharacterPosition(newPosition) if (characterVelocity.current.length() > 0.01) { const angle = Math.atan2(characterVelocity.current.x, characterVelocity.current.z) setCharacterRotation([0, angle, 0]) setIsMoving(true) } else { setIsMoving(false) } const radius = 3 const x = Math.sin(cameraAngle.y) * Math.cos(cameraAngle.x) * radius const z = Math.cos(cameraAngle.y) * Math.cos(cameraAngle.x) * radius const y = Math.sin(cameraAngle.x) * radius const cameraHeight = 2 camera.position.set( newPosition[0] + x, newPosition[1] + y + cameraHeight, newPosition[2] + z ) const lookAtPoint = new THREE.Vector3( newPosition[0], newPosition[1] + 1.5, newPosition[2] ) camera.lookAt(lookAtPoint) }) return ( <> }> ) } function LoadingBox({ position }) { return ( ) } export default function Component() { return (

Click on the scene to lock/unlock mouse controls

) }

About

Tags

Share

More from ctate

More Templates Like This

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This