Creating moving parts in blender that will move in response to user input in 3JS

I had the feeling that we were headed back to where you started, but I think we have now narrowed things down quite a bit.

Here is the aircraft in a stripped down viewer:
Animation Viewer
(I couldn’t get rid of the skybox - a challenge for another day. If you press either mouse button, you can orbit around the aircraft.)

I will add the steps you suggest and see if that fixes the problems. It does sound promising.

I was looking at some of the 3JS examples with multi-animations and realized that my understanding of the mixer was probably not correct, since the examples had different mixers for different animations.

Yes, over the decades, I have written programs in several different languages: Fortran, Basic, assembly languages for 6502 (Apple) and 68000 (Amiga), and, more recently, C+.and js. In each case, I was pursuing a specific project and most of what I learned involved trying to interpret code that others had written and adapting it to my needs.

It’s not often that I have the author of the code to help me along. So I really appreciate your guidance.

1 Like

Got it!

You can see the results at:
Animation Viewer
Press the arrow keys to see the elevator and rudder move.

For the record, here are the changes I made:

At the beginning of the program, I inserted the following global variables:

var mixer1 = 0;
var mixer2 = 0;

In the function(gltf) section of the file loader, I inserted the following lines:

// The elevator animation
var clip1 = gltf.animations[0];
mixer1 = new THREE.AnimationMixer(object);
var action1 = mixer1.clipAction(clip1);
action1.play();
// The rudder animation
var clip2 = gltf.animations[1];
mixer2 = new THREE.AnimationMixer(object);
var action2 = mixer2.clipAction(clip2);
action2.play();

In the main program, I inserted the following commands:

if (mixer1) mixer1.setTime(elvatr/anmfps);
if (mixer2) mixer2.setTime(rudder/anmfps);

where elvatr and rudder have values of between 1 and 59 (since the animation has 60 steps) and anmfps = 24 (which is the default fps for Blender animations).

You need a separate mixer for the animation associated with each part because you will be using the mixer.setTime(t) command to set the position for each part.

I just need to test this in my flight simulator demo to make sure that the parts do not “detach” (I don’t see why they would) and that there is no huge frame rate hit.

Thanks for all your help and encouragement!

EDIT: I tested it out on the program and it works great! I only changed the movement of the elevator because it is relatively straightforward. The rudder movement will be more complex. And I need to add animations for 2 to 4 ailerons. And now that I know how to add animations, I can add all sorts of eye candy to the simulation, such as waving flags and people.

1 Like

Congratulations, I was sure it was just a matter of time.

Quite an impressive set of languages you have on your background. Make sure you keep the assembly actual as soon we’ll converge to a webassembly tendency :slight_smile: which is not only about assembly but compiling from a multitude of other languages.

Back to your demo, I think from here on you can improve it the way you want as your objective of this thread is reached.

When it comes to the mixer global variables you added, that’s exactly what I did with the anim_params to the difference that in case you’d like to scale this up to many objects animations and not only one, you’ll need to store variables for each object and that’s all what anim_params is, a map to contain those variables for each object that is created dynamically. It’s good if you manage a design where you don’t have to modify anything on the animation js module for any new object, but that is up to you application scalability.

As a conclusion

  • I’m glad the concept of using an animation for a predictable movement of user input has helped
  • I see room for improvements here in three.js as such helper does not exist
1 Like

It certainly is something that could have a lot of interesting applications. For example, you could create a model car that is steerable, with opening doors and a movable suspension. Or perhaps create a sailing game where you could adjust the position of the sails to catch the wind.

I have contacted some Blender bloggers to see if they would like to share this with the Blender community. An increased interest could encourage the people at three.js to create a helper.

Three.js could also benefit from including your program in their examples since it shows how to do many unique things.

Thanks again for all your help!

1 Like

That’d be great, if you have any links to blender community interest let me know, I did not explore that yet,
I created a post in this forum to present the concept in a more generic way, as you can see the parameters do not only include animation as in your use case but many others such as colors, light, connection to external events such as MQTT and more

And I made a post about my complete Showcase example of a smar home application using that

I also know someone who’s expert in plane models construction and flight simulation programs who could test any demos you come up with.