Animating 3D Models Using PyWeb3D

Use three.js with Python syntax

Image by author

Welcome back! Today’s article will guide you on how to animate your 3d models using pyWeb3D. If you missed the previous article on how to load 3D models using pyWeb3D, do check it out.

Below is a short clip of what we will create by the end of this article:

video clip from the author

What you will need

Download a 3D model of your choice that is rigged and has animation (you can download it from sketchfab.com) or if you’re a 3D artist, you can create your character using your favorite software and export it in .GLTF or .GLB format.

Below are the resources that we will use:

• 3D model
• Ground texture

HTML Boilerplate

All the code below will go into the inline <script type=”text/python”> tag in the body of our HTML file.

Importing the Necessary Modules and Functions

Variables Setup

We declared global variables to be used later in our code

Creating Our Scene and animating the model

Let’s go over the contents of the above code snippet line by line

• From lines 2–7, we made modifiable variables from lines 1–3 of the Variables Setup code snippet. if you’re new to python, the global keyword is needed to modify the global copy of the variables we declared from lines 1–3 of the Variables Setup code snippet.
• From lines 10 — 12, we created a camera, positioned the camera, and gave it a place to look at.
• On line 15, we created a clock. The clock will be used later on in our code when we animate the scene.
• From lines 17 — 19, we created a Scene, gave it a sky blue background color, and a fog.
• From lines 22 — 35, we added two lights, a Hemisphere light, and a Directional light, and added them to the scene.
• From lines 38 — 42, we loaded an image texture for the ground and adjusted the default settings.
• From lines 44 — 49, we created a Mesh that takes the geometry(plane in this case) and material as an argument. material is to Mesh what CSS is to HTML. Then we adjusted the default settings and added it to the scene.
• On line 52, we instantiated our .GLB model loader
• From lines 54 — 75, we created a call-back function to load and animate our model.
  Let’s go over the function:
  - From lines 56 — 58, we instantiated the model, scaled it down a bit, and added it to the scene.
  - From lines 60 — 65, added a shadow to the model if it is a mesh object.
  - On line 68, we get all the animation clips from the model.
  - On line 70, we created a player for the animation.
  - On line 72, we selected a particular animation clip using the animation[0]. Depending on how many animation clips the model has, we can select a clip by changing the index.
  - On line 73, we played the animation clip using the .play() method.
  - On line 75, we called our animate function(we haven’t defined it yet)
• On line 77, we loaded the model.
• From lines 79 — 86, we created a webgl renderer, adjusted the settings and appended it to the body of our HTML file. renderer.domElement is the canvas
• On line 88, we initialized the controls.
• On line 90, we added an event listener for widow resize.

Handle Window resize

In this snippet, we defined our window resize handler

Animating our scene

Lastly, we create the animate function

• On line 2, we tell the browser that we want to perform an animation.
• On line 3, we get the seconds that passed since the time started.
• From lines 4 — 6, we move the ground backward.
• On line 7, we updated the animation player
• On line 8, we rendered the scene and the camera.

Now Run the Code

Open the HTML file in your browser. :)

video clip from the author

See the live version here.

I hope you enjoyed this article. Thanks for reading.

Source Code

PyWeb3D/examples/webgl_3D_model_animation.html at main · Bruno-Bells/PyWeb3D

Credits and References

• Inspired by three.js
• Brython
• Python

Want to contribute?
Would you like to contribute to PyWeb3D? Join me, and let’s create something awesome together. Join me here.