效果图:
代码解析:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - additive animation - skinning</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>
a {
color: blue;
}
.control-inactive button {
color: #888;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Skeletal Additive Animation Blending
(model from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">mixamo.com</a>)<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 {
OrbitControls } from 'three/addons/controls/OrbitControls.js';
import {
GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
let scene, renderer, camera, stats;
let model, skeleton, mixer, clock;
const crossFadeControls = [];
let currentBaseAction = 'idle';
const allActions = [];
const baseActions = {
//第一个控制面板的值
idle: {
weight: 1 },
walk: {
weight: 0 },
run: {
weight: 0 }
};
const additiveActions = {
//添加到右上角交互的选项
sneak_pose: {
weight: 0 },
sad_pose: {
weight: 0 },
agree: {
weight: 0 },
headShake: {