Following animation with camera

Questions
,
1

I would like to follow animation with a camera, just like he is an actor.

Here my test: JSFIDDLE

The camera is

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Then I loaded a FBX file having the animation:

mixer = new THREE.AnimationMixer( object );
const action = mixer.clipAction( object.animations[ 0 ] );
action.play();

Finally the animation:

const delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );

Any suggestion on how to move the camera to follow the star?

Animation used in this demo is not walking as mine in the final project. I’d like to follow the walking…

2

here is a demo
Using tween.js with the AnimationMixer - Three.js Tutorials (sbcode.net)
Double click the floor.
I am useing the tween.module.js lib that comes with the threejs examples/jsm/libs folder
See the JS source code by pressing the <> button in the working demo

In my tween.update, I update the controls.target to look at the models position

controls.target.set(
    modelMesh.position.x,
    modelMesh.position.y + 1,
    modelMesh.position.z)

You may not need to use tween, you can update the controls.target in the animation loop if you will always be looking at the model

1 Like
3

Thanks! This tutorial is amazing and it seems to be perfect!! I’ll check soon! Thanks for your help!

4

At the moment I don’t need the TWEEN (I guess) but I have add it just in case I’ll need it later.

In your example modelMesh = gltf.scene; , I’m using FBX file and I can’t get the position (always [0,0,0])

Here my test

5

Alternatively to tween - you can use Vector3.lerp to create a smooth position transition (lowering alpha makes the movement slow, setting alpha to 1.0 results in instant change of position.)

(Vector3.lerpVectors allows you to tween alpha value, too. :chart_with_upwards_trend: )

1 Like
6

It works in my demo, because I change the position of the whole model within the scene when you double click on the floor.

For the animation in your example, you can look at a child object instead.

This is my edits to your jsfiddle
Change controls target on animated fbx

There are several edits compared to your version, but the main concept is this in the animation loop.

if (modelMesh) {
  const v = modelMesh.children[0].position.clone();
  v.multiplyScalar(.022);
  controls.target.copy(v);
  controls.update()
}

My modelMesh variable is the whole fbx after it was loaded.
I’ve also scaled the vector, since thats what you did when you loaded the fbx.

The way to solve this problem will always be different and depend on what model and animation you loaded.

Do a console.log on the model you’ve chosen to see what objects (position for example) are within it that you can utilise or modify.

1 Like
7

Thanks a lot! It works nice on Demo, I think I can copy it to my project. Thanks again got your helpful help and your time!