Simple character controller with animations

I’m wondering what the easiest and most efficient way to create a character controller. I want people to be able to choose their character and then be able to walk around my 3D world. No running, jumping, etc is needed, just walking. I would get the animations via mixamo and fbx… any suggestions as to do this.
According to Simon Dev on YouTube, it takes 300 lines to make a “Simple” character controller. Am I wrong or is there really a way to make it simple. reducing it to even 100 lines would be appreciated

PS: This is Simon’s code (Assume the files he is using all work and are in the proper location)-
base.css (150 Bytes)
index.html (350 Bytes)
main.js (16.2 KB)

Less than 100 lines (lines 61 to 144). Click on the canvas and use the arrow keys. It has no animations, but has smoothness. Adding mouse control would be a few more line (let’s say 20).

Thanks Pavel…I’ll mark this as the solution if nobody else responds…But I really do want to see how efficient someone can make it

1 Like

This is not a solution as it has no animations, but animations should not take too many lines.

It’s around 300 lines or less if you set it all beforehand.
I’m using mixamo with three.js too, here is my workflow:

-Inside your 3D app: chain all animations on a single skeleton/timeline
-skin all meshes on this skeleton, doesn’t matter if meshes stack on each other.
-Inside three, split your timeline using the THREE.AnimationUtils.subclip function
-Hide/show/mix the correct meshes and animation

The whole point of this: Avoiding complex operation like reskin/weight/bones cloning inside three.
(it’s a mess, and introduce more issues than answers). I can provide code if needed

1 Like

Code would be appreciated due to my lack of knowledge…

I will provide a repo later, because it require some cleaning
whole code including render/scene setup is probably above 100 lines tho :laughing:.

Alright…thanks @Oxyn
Thanks too for @PavelBoytchev

Where would I add those animations…

Here is a demo from one of my courses. Look at the source, the running character is called Mei. You can see how Mei is loaded and her animation is activated. It is about 20 lines long.

Note: the demo uses FlyControls so use the mouse to navigate in the scene. Mei only runs in circles.


1 Like

I’m slightly above 100 lines with the method mentioned earlier.
include basic character control, appareance switch, idle and run animation.
it’s all very basic of course.

Live demo included:

1 Like

Thanks So much Thats quite enough… Thanks!!!