Three.js 动画

提示词

PROMPT
1
使用 Three.js 的 requestAnimationFrame 实现动画循环，展示模型旋转和帧率计算。

效果描述

这是一个展示如何实现动画循环的示例，包括模型旋转和帧率计算。

效果特性

  • 动画循环：使用 requestAnimationFrame 实现动画循环
  • 模型旋转：模型绕 Y 轴旋转
  • 帧率计算：计算每秒帧数
  • 时间间隔：计算两帧之间的时间间隔
  • 实时渲染：实时渲染场景
  • Clock：使用 Clock 获取时间

核心参数

参数 值 说明
几何体大小 10, 60, 100 XYZ 三方向大小
材质颜色 0xff0000 红色
旋转角度 0.01 每帧旋转弧度
坐标轴大小 150 AxesHelper 大小
相机位置 (200, 200, 200) 相机位置

核心代码解析

创建场景和模型

JAVASCRIPT
1
2
3
4
5
6
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(10, 60, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 10, 0);
scene.add(mesh);

动画循环

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
const clock = new THREE.Clock();
function render() {
    const spt = clock.getDelta() * 1000; // 毫秒
    console.log("两帧渲染时间间隔(毫秒)", spt);
    console.log("帧率FPS", 1000 / spt);

    renderer.render(scene, camera);
    mesh.rotateY(0.01); // 每次绕y轴旋转0.01弧度
    requestAnimationFrame(render);
}
render();

技术亮点

  1. 动画循环：使用 requestAnimationFrame
  2. 模型旋转：模型绕 Y 轴旋转
  3. 帧率计算：计算每秒帧数
  4. 时间间隔：计算两帧之间的时间间隔
  5. Clock：使用 Clock 获取时间

调试技巧

  1. 旋转速度：调整旋转角度控制速度
  2. 帧率监控：观察帧率变化
  3. 时间间隔：观察时间间隔变化
  4. 模型位置：调整模型位置
  5. 相机位置：调整相机位置

扩展方向

  1. 复杂动画：实现复杂动画
  2. 多模型动画：动画多个模型
  3. 动画控制：控制动画播放
  4. 动画序列：创建动画序列
  5. 动画缓动：添加动画缓动效果

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。