Animation and Action Editor practices Blender and Three.js

Name: Animation and Action Editor practices Blender and Three.js
Rating: 4.4 (59 reviews)

Step by step animation and Action Editor practices with Blender and Three.js

Created byOscar Villarreal

Last updated 1/2022

English

What you'll learn

Create a 3D Model with Blender
Rigging
Create Actions and Animations Using Blender's Action Editor.
Store multiple animations as Non Linear Actions.
Export the 3D model so that it can be used in different applications.
load our 3D model into a web page and control its actions using Threejs

Course content

4 sections • 25 lectures • 1h 13m total length

Introduction0:36
Explore creating a 3d model with animations in Blender, then display it on a web page using Three.js, finishing with the final result.

Creating the model 12:10
Creating the model 24:45
Creating the model 32:12
Creating the model 43:47
Creating the model 51:40
Rigging 14:29
Practical rigging basics: create a symmetric armature in Blender, add bones, extrude along the x and z axes, and place joints from neck to knee for a ready-to-animate rig.
Rigging 22:11
Inverse Kinematic 12:13
Explore inverse kinematics to simplify adjusting arm and leg positions by manipulating an armature in edit mode, extruding bones, and disconnecting them by removing deform and parents.
Inverse Kinematic 23:25
Inverse Kinematic 33:22
Model details4:43
Action 1 (TPose)2:53
Action 2 (Idle)2:11
Create idle action by adding an action, set frame 1, move the arm in front view, select all bones, apply location, rotation, scale, rename to Idle, and stash as NLA.
Action 3 (Walk)6:23
Action 4 (Sit)4:52
Export1:26
Export your Blender model as a glb file using glTF 2.0, selecting TPose as the default action and ensuring animation values are included.

Requirements

Basic understanding of Blender
Basic understanding of Javascript
Basic understanding of Visual Studio Code

Description

Hello and welcome.

If you are a developer or designer who is interested in creating 3D models to which you can add multiple animations to be used in environments such as web pages, virtual reality or video games, this course is for you.

In this course we will focus on using Blender to create a model to which we will add multiple actions with animations to later display it on a web page using JavaScript and Three.js.

We will create our model step by step, we will assign an armor, we will change its positions and we will program a panel on a web page with which we can control the animations.

In this course you will learn:

Create 3D models in Blender.
Rigging.
Create Actions and Animations Using Blender's Action Editor.
Store multiple animations as Non Linear Actions.
Export the 3D model so that it can be used in different applications.
Use Visual Studio Code as a work environment with webpack.
We will load our 3D model into a web page and control its actions using Three.js

I hope that the content of this course will be useful to you and that you can apply it to your personal projects.

Have fun and happy learning.

Who this course is for:

Web developers
Designers that want to implement their 3d designs in a web page

Animation and Action Editor practices Blender and Three.js

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Blender16 lectures • 53min

Three.js7 lectures • 19min

Result1 lecture • 2min

Requirements

Description

Who this course is for: