threejs官方demo解析(二)

效果图:
在这里插入图片描述
代码解析:

<!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: {
     
      
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值