01.three官方示例+编辑器+AI快速学习webgl_animation_keyframes

发表于 2025-9-18 06:28:47

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

实例：examples/webgl_animation_keyframes.html
在这里插入图片形貌
重点关注：

AnimationMixer：管理模子的全部动画
AnimationClip：表现一个完备的动画
ClipAction：控制动画的播放状态（播放、停息、速度等）
PMREMGenerator处置惩罚环境光照，提拔渲染质量

本实例重要解说内容

本实例重要解说在Three.js中怎样使用WebGL技能实现3D模子的加载、动画播放以及用户交互。通过创建场景、相机、渲染器等底子对象，加载GLTF模子并应用动画，同时使用轨道控制器实现用户对相机视角的控制，以及使用性能统计工具优化渲染性能，展示了一个完备的3D动画交互场景的构建过程，资助开辟者把握Three.js在动画和交互方面的焦点应用。 ### 代码注释与重点解析
以下是对Three.js动画关键帧示例的详细注释，包罗了学习重点和焦点概念解析：

<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - animation - keyframes</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 {
background-color: #bfe3dd;
color: #000;
}
a {
color: #2983ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - keyframes<br/>
Model: <a href="https://artstation.com/artwork/1AGwX" target="_blank" rel="noopener">Littlest Tokyo</a> by
<a href="https://artstation.com/glenatron" target="_blank" rel="noopener">Glen Fox</a>, CC Attribution.
</div>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
// 导入Three.js核心库
import * as THREE from 'three';
// 导入性能统计工具Stats
import Stats from 'three/addons/libs/stats.module.js';
// 导入轨道控制器OrbitControls，用于控制相机视角
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 导入房间环境对象RoomEnvironment，用于创建场景环境
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
// 导入GLTF模型加载器GLTFLoader
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 导入Draco压缩模型加载器DRACOLoader
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
// 声明动画混合器变量
let mixer;
// 创建时钟对象，用于计算动画时间间隔
const clock = new THREE.Clock();
// 获取放置渲染结果的容器元素
const container = document.getElementById('container');
// 创建性能统计对象
const stats = new Stats();
// 将性能统计的DOM元素添加到容器中
container.appendChild(stats.dom);
// 创建WebGL渲染器，开启抗锯齿
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置渲染器的像素比为设备像素比
renderer.setPixelRatio(window.devicePixelRatio);
// 设置渲染器的尺寸为窗口的内部宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的DOM元素添加到容器中
container.appendChild(renderer.domElement);
// 创建PMREM生成器，用于生成预过滤辐射环境贴图
const pmremGenerator = new THREE.PMREMGenerator(renderer);
// 创建场景对象
const scene = new THREE.Scene();
// 设置场景背景颜色与页面背景一致
scene.background = new THREE.Color(0xbfe3dd);
// 设置场景环境，使用房间环境并生成对应的纹理
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
// 创建透视相机
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
// 设置相机位置
camera.position.set(5, 2, 8);
// 创建轨道控制器，关联相机和渲染器的DOM元素
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器的目标点
controls.target.set(0, 0.5, 0);
// 更新控制器状态
controls.update();
// 禁用平移功能
controls.enablePan = false;
// 启用阻尼效果，使相机移动更平滑
controls.enableDamping = true;
// 创建Draco加载器
const dracoLoader = new DRACOLoader();
// 设置Draco解码器的路径
dracoLoader.setDecoderPath('jsm/libs/draco/gltf/');
// 创建GLTF加载器
const loader = new GLTFLoader();
// 为GLTF加载器设置Draco加载器，用于加载压缩的GLTF模型
loader.setDRACOLoader(dracoLoader);
// 加载GLTF模型
loader.load('models/gltf/LittlestTokyo.glb', function (gltf) {
// 获取加载的模型场景
const model = gltf.scene;
// 设置模型位置
model.position.set(1, 1, 0);
// 设置模型缩放比例
model.scale.set(0.01, 0.01, 0.01);
// 将模型添加到场景中
scene.add(model);
// 创建动画混合器，关联模型
mixer = new THREE.AnimationMixer(model);
// 播放模型的第一个动画剪辑
mixer.clipAction(gltf.animations[0]).play();
// 设置渲染器的动画循环函数
renderer.setAnimationLoop(animate);
}, undefined, function (e) {
// 加载过程中出现错误时，在控制台打印错误信息
console.error(e);
});
// 窗口大小改变时的回调函数
window.onresize = function () {
// 更新相机的纵横比
camera.aspect = window.innerWidth / window.innerHeight;
// 更新相机的投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
};
// 动画循环函数
function animate() {
// 获取时钟的时间间隔
const delta = clock.getDelta();
// 更新动画混合器，推进动画
mixer.update(delta);
// 更新轨道控制器，处理相机的交互
controls.update();
// 更新性能统计信息
stats.update();
// 使用渲染器渲染场景和相机
renderer.render(scene, camera);
}
</script>
</body>
</html>

复制代码

学习重点解析

Three.js底子架构
- 场景(Scene)、相机(Camera)、渲染器(Renderer)的创建与配置
- 轨道控制器(OrbitControls)的使用，实现用户交互
GLTF模子加载与处置惩罚
- 使用GLTFLoader加载3D模子
- DRACOLoader处置惩罚压缩模子，进步加载效率
- 模子位置、缩放和旋转的调解
关键帧动画体系
- AnimationMixer：管理模子的全部动画
- AnimationClip：表现一个完备的动画
- ClipAction：控制动画的播放状态（播放、停息、速度等）
性能优化与监控
- 使用Stats监控帧率和性能
- PMREMGenerator处置惩罚环境光照，提拔渲染质量
- 窗口巨细自顺应处置惩罚
动画循环机制
- 使用renderer.setAnimationLoop()设置动画循环
- 使用Clock对象盘算帧隔断时间，确保动画速度划一

本实例焦点目的

这个示例重要展示了Three.js中关键帧动画体系的使用方法，通过加载包罗动画的GLTF模子，并使用AnimationMixer播放动画，演示了以下焦点概念：

怎样加载和处置惩罚包罗动画的3D模子
怎样使用Three.js的动画体系控制模子动画
怎样实现平滑的动画循环和时间管理
怎样通过环境光照提拔模子渲染结果

这是Three.js动画体系的底子教程，恰当学习3D场景中脚色动画、物体运动等动画结果的实现方法。
互换学习： Three.js 场景编辑器 (Vue3 + TypeScript
实现)
https://threelab.cn/threejs-edit/

01.three官方示例+编辑器+AI快速学习webgl_animation_keyframes

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

兜兜零元