Animation and Action Editor practices Blender and Three.js

Delete the default content, insert a cube, enter edit mode, use a loop cut on the x axis, delete the left half, then apply a mirror with clipping to center.

Create a humanoid model in Blender by insetting and deleting faces, moving and scaling the face, then extruding to form head, neck, torso, legs, and arms, with a loop cut.

Select the torso, legs, and arms by shift left-clicking their front and back faces, then narrow their width along the y-axis by pressing S and Y.

Insert cuts in the leg and arm, move the knee and shoulder to shape joints, and bevel flexing areas like knee, hip, arm, and neck.

Select the arm edges, apply a bevel, and mirror the changes. Set the origin to the center of mass and move the model to the cursor to center it.

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.

rig the elbow and knee bones in edit mode, align bone tips from top and side views, then parent the model to the armature with automatic weights for proper deformation.

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.

Display bone names, enter pose mode, enable inverse kinematics on end bones with a chain length of 2, reference the armature as the target, and repeat for the remaining ends.

Keep the upper and lower body connected using edit mode with keep offset, test IK in pose mode, and reset with Alt G; set IK limit 2 for leg bones.

Apply subdivision surface and shade smooth to add detail. Create a material with base color and roughness for marble or rubber looks, and test armature movement.

Switch to pose mode and use the dope sheet and action editor to create a new TPose action, keyframe location, rotation, and scale, then stash as a non linear action.

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.

Create a walking action by posing the armature and keyframing location, rotation, and scale, then duplicate and mirror frames to form a basic walk and stash the action as walk.

Create a sit action in blender by adding a reference cube, keyframing location, rotation, and scale at frames 1 and 25, adjust limbs to sit, stash action, and delete cube.

Export your Blender model as a glb file using glTF 2.0, selecting TPose as the default action and ensuring animation values are included.

Configure a three.js project using visual studio code and node.js by initializing npm, installing webpack and webpack-cli, installing three, and creating dist and src with index.js and index.html.

Configure webpack by adding webpack.config.js with the recommended configuration, then modify package.json to set private to true and add a build script. Run npm run build to generate main.js.

Create the index.html structure by adding the doctype, html, head, and style tags, style the body, and include a canvas with id MyCanvas and a reference to the main.js file.

Set up a Three.js scene in index.js by importing three, orbit controls, gltf loader, and dat gui; create canvas, scene, renderer, lights, camera, and orbit controls.

Create a gui with width 300 to control model actions, using current_action and pause_resume, load actions with GLTFLoader, organize them in an Actions folder, and animate the selected action.

Load a model with loader.load, initialize an AnimationMixer, iterate through actions with clipAction, manage play and stop via actions, and render the scene with animate using requestAnimationFrame and mixer.update.

Build the main.js with npm run build, serve the dist folder with http-server, and access the app from two IP addresses in the browser.

Watch a live demonstration of the application working, select different actions, and control the animations to showcase the animation editor workflow.