1

I am trying to animate a camera movement so that when a user clicks on the contact menu, the 3D model shows on the left of the screen. Something like this project

Currently, I'm using the UseFrame hook as in this tutorial

The problem is I'm using the lookAt() function and the 3D element is always in the center of the screen.

Here's my code

import { useAnimations, useGLTF } from '@react-three/drei'
import { useEffect, useRef } from 'react'
import { useControls, button} from 'leva'
import { useFrame } from '@react-three/fiber'
import { Vector3 } from 'three'

export default function Character ({isContact}) {

    const character = useGLTF('./model.gltf')
    const { actions } = useAnimations(character.animations, character.scene)
    
    const markerRef = useRef()
    const vec = new Vector3()
    
    useFrame((state, delta, xrFrame) => {
        
        if(isContact){                           
            state.camera.lookAt(markerRef.current.position.x , markerRef.current.position.y + 1  , markerRef.current.position.z  )            
            state.camera.position.lerp(vec.set(-4, 0, 0 ), 0.01)
            state.camera.updateProjectionMatrix()
        }
        else if(!isContact){            
            state.camera.lookAt(markerRef.current.position.x , markerRef.current.position.y + 1 , markerRef.current.position.z )
            state.camera.position.lerp(vec.set(-3, 1.5, 4 ), 0.01)
            state.camera.updateProjectionMatrix()
        }
        return null
    })
    
    
    return (
        
        <primitive 
            object= { character.scene}
            position-y= {-1.2}
            ref={markerRef}
            
        />
        
        
    )
    
}

I also tried to add +2 at the z coordinate in the lookAt() function like so:

state.camera.lookAt(markerRef.current.position.x , markerRef.current.position.y + 1  , markerRef.current.position.z +2 )                                    

The position is correct, but the problem is that the camera animation "bounces"

Any thoughts on how to do that?

lorenzoajt
  • 105
  • 2
  • 7

0 Answers0