当前位置：首页 > news >正文

06.three官方示例+编辑器+AI快速学习webgl_animation_skinning_additive_blending

news 来源：原创 2025/5/14 3:25:59

本实例主要讲解内容

这个Three.js示例展示了**骨骼动画(Skinning)和变形动画(Morphing)**的结合应用。通过加载一个机器人模型，演示了如何同时控制角色的肢体动作和面部表情，实现更加丰富的角色动画效果。

核心技术包括：

多动画混合与淡入淡出
基础动画状态与一次性动作的切换
面部变形目标(Morph Targets)控制
动画事件监听与状态恢复

完整代码注释

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - skinning and morphing</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"><style>body {color: #222;}a {color: #2fa1d6;}p {max-width: 600px;margin-left: auto;margin-right: auto;padding: 0 2em;}</style></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - skinning and morphing<br /><p>The animation system allows clips to be played individually, looped, or crossfaded with other clips. This example shows a character looping in one of several base animation states, then transitioning smoothly to one-time actions. Facial expressions are controlled independently with morph targets.</p>Model by<a href="https://www.patreon.com/quaternius" target="_blank" rel="noopener">Tomás Laulhé</a>,modifications by <a href="https://donmccurdy.com/" target="_blank" rel="noopener">Don McCurdy</a>. CC0.<br /></div><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import Stats from 'three/addons/libs/stats.module.js';import { GUI } from 'three/addons/libs/lil-gui.module.min.js';import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';let container, stats, clock, gui, mixer, actions, activeAction, previousAction;let camera, scene, renderer, model, face;const api = { state: 'Walking' };init();function init() {container = document.createElement( 'div' );document.body.appendChild( container );camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );camera.position.set( - 5, 3, 10 );camera.lookAt( 0, 2, 0 );scene = new THREE.Scene();scene.background = new THREE.Color( 0xe0e0e0 );scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );clock = new THREE.Clock();// lightsconst hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );hemiLight.position.set( 0, 20, 0 );scene.add( hemiLight );const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );dirLight.position.set( 0, 20, 10 );scene.add( dirLight );// groundconst mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xcbcbcb, depthWrite: false } ) );mesh.rotation.x = - Math.PI / 2;scene.add( mesh );const grid = new THREE.GridHelper( 200, 40, 0x000000, 0x000000 );grid.material.opacity = 0.2;grid.material.transparent = true;scene.add( grid );// modelconst loader = new GLTFLoader();loader.load( 'models/gltf/RobotExpressive/RobotExpressive.glb', function ( gltf ) {model = gltf.scene;scene.add( model );createGUI( model, gltf.animations );}, undefined, function ( e ) {console.error( e );} );renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animate );container.appendChild( renderer.domElement );window.addEventListener( 'resize', onWindowResize );// statsstats = new Stats();container.appendChild( stats.dom );}function createGUI( model, animations ) {// 定义不同类型的动画状态const states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];const emotes = [ 'Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp' ];gui = new GUI();mixer = new THREE.AnimationMixer( model ); // 创建动画混合器actions = {};// 初始化所有动画动作for ( let i = 0; i < animations.length; i ++ ) {const clip = animations[ i ];const action = mixer.clipAction( clip );actions[ clip.name ] = action;// 设置一次性动画的属性if ( emotes.indexOf( clip.name ) >= 0 || states.indexOf( clip.name ) >= 4 ) {action.clampWhenFinished = true; // 动画结束后保持最后一帧action.loop = THREE.LoopOnce; // 只播放一次}}// 创建状态控制面板const statesFolder = gui.addFolder( 'States' );// 添加状态选择下拉菜单const clipCtrl = statesFolder.add( api, 'state' ).options( states );// 状态变化时的回调函数clipCtrl.onChange( function () {fadeToAction( api.state, 0.5 ); // 淡入淡出到新状态} );statesFolder.open();// 创建表情控制面板const emoteFolder = gui.addFolder( 'Emotes' );// 为每个表情创建回调函数function createEmoteCallback( name ) {api[ name ] = function () {fadeToAction( name, 0.2 ); // 淡入表情动画// 添加动画完成事件监听，完成后恢复基础状态mixer.addEventListener( 'finished', restoreState );};emoteFolder.add( api, name );}// 恢复基础状态的函数function restoreState() {mixer.removeEventListener( 'finished', restoreState );fadeToAction( api.state, 0.2 );}// 为每个表情创建控制面板项for ( let i = 0; i < emotes.length; i ++ ) {createEmoteCallback( emotes[ i ] );}emoteFolder.open();// 面部表情控制face = model.getObjectByName( 'Head_4' );// 获取所有面部变形目标const expressions = Object.keys( face.morphTargetDictionary );const expressionFolder = gui.addFolder( 'Expressions' );// 为每个面部表情创建滑块控制for ( let i = 0; i < expressions.length; i ++ ) {expressionFolder.add( face.morphTargetInfluences, i, 0, 1, 0.01 ).name( expressions[ i ] );}// 设置初始活动动画activeAction = actions[ 'Walking' ];activeAction.play();expressionFolder.open();}// 动画淡入淡出函数function fadeToAction( name, duration ) {previousAction = activeAction;activeAction = actions[ name ];if ( previousAction !== activeAction ) {previousAction.fadeOut( duration ); // 淡出当前动画}// 重置并播放新动画activeAction.reset().setEffectiveTimeScale( 1 ).setEffectiveWeight( 1 ).fadeIn( duration ).play();}// 窗口大小变化处理函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}// 动画循环函数function animate() {const dt = clock.getDelta();if ( mixer ) mixer.update( dt ); // 更新动画混合器renderer.render( scene, camera ); // 渲染场景stats.update(); // 更新性能统计}</script></body>
</html>