How to properly make animation from a Class?

Questions
1

here is link with full code
https://jsfiddle.net/g2e8n5bu/

my animation does not play

2

It works if you donā€™t use SkeletonUtils.clone() in your player class to clone a scene object. This method is intended for skinned meshes.

Itā€™s also recommended to call AnimationAction.play() only once and not per frame.

https://jsfiddle.net/un64t53L/

The problem with cloning is that the animation

3

thank you, i just want make small game.

i tought for performance reason i clone mesh, because each time player connects should create new mesh of robot ?

4

In general, cloning is the correct approach for this use case. I am also seeing now that you adapt the code of this example:

https://threejs.org/examples/#webgl_animation_multiple

However, the robot is no part of it. There could be a problem with the structure of the asset which produces a problem when cloning is performed or when you create the instance of AnimationMixer.

5

even if i clone, i console logged player.animmations, there are animations, but they do not play for some reason

6

I think the problem is that the robot consist of four separate skinned meshes whereas the example only uses models with a single skinned mesh. You can verify the amount of skinned meshes here:

https://jsfiddle.net/cezku0q1/

7

ahh okey, i just been trying to do same thing as you did in https://github.com/Mugen87/dive/blob/292796446f4c80067c0d2c49ad1f36202c0b7e27/src/core/AssetManager.js

i just do not understand how you handle events on playing animation when player runs left or right, jumps etc.

8

This is done in the following method:

Itā€™s important to understand that the routine does not playback just a single animation. Instead, the code computes a weighting for an active set of animations based on the game entitieā€™s velocity and look direction. In this way, the movement animation is more natural and you never have a sudden change from letā€™s say move forward to move right.

9

thank you so much

1 Like
10

i have question, i just loaded the model (ā€œsoldierā€) from Dive, the soldier is very small, do i need to scale the model or i need to zoom in camera to the model ?

i just copied camera from Dive
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 45, 150 );

11

The camera is too far away^^. The code above represents the spectator settingsā€¦

12

what should it be then ?

13

here is link, but i can not load model because of cors origin
https://jsfiddle.net/wk8b1ezm/

14

Well, this depends on your use case. Maybe do it like in this example:

https://threejs.org/examples/webgl_animation_skinning_blending

15

ok i will try it

16

i tried, but animation does not play

https://jsfiddle.net/aehypx53/

17

well it is due of weights because

Uncaught TypeError: transformedDirection.copy(ā€¦).applyRotation is not a function

transformedDirection.copy( directions[ i ].direction ).applyRotation( quaternion );
const dot = transformedDirection.dot( lookDirection );

dot is always 0, thats why my weights do not change

18

hey, i tried this exemple that you linked,
but
mixer.addEventListener( ā€˜loopā€™, onLoopFinished ); it says it is undefined

here is link
https://jsfiddle.net/yte49bgf/6/

19

Um, Iā€™m not seeing a runtime error causes by an undefined variable in the browser console.

20

mixer.addEventListener( ā€˜loopā€™, onLoopFinished );
this does not work

console.log(mixer.addEventListener(ā€œloopā€, onLoopFinished )) is undefined