2021SC@SDUSC 【软件工程应用与实践】Claygl项目代码分析（三）

最新推荐文章于 2025-12-10 20:37:40 发布

原创最新推荐文章于 2025-12-10 20:37:40 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了deltaTime在Particle.js中的作用，它代表每一帧间的时间差距，用于确保在不同帧率下物体移动的准确性。通过deltaTime，可以将速度乘以时间间隔得到每帧的实际位移，避免因帧率变化导致的渲染问题。Particle.prototype.update函数中，利用deltaTime更新粒子的位置，以实现平滑的动画效果。

2021SC@SDUSC

一、Particle.js

Particle.prototype.update

一、Particle.js

Particle.prototype.update

Particle.prototype.update = function(deltaTime) {
    if (this.velocity) {
        vec3.scaleAndAdd(this.position.array, this.position.array, this.velocity.array, deltaTime);
    }
    if (this.angularVelocity) {
        vec3.scaleAndAdd(this.rotation.array, this.rotation.array, this.angularVelocity.array, deltaTime);
    }
};

（1）deltaTime介绍

如上述代码可见，函数参数有“deltaTime”，称为增量时间。这一概念十分重要故而先说明其含义。delta（即Δ），常用来表示前后变化差距，而deltaTime则是代表了每一帧间时间的差距。

影视游戏中的渲染是按帧进行的。

当物体每秒移动30米，即30m/s，若以30帧每秒运行，则每帧的位移为一米；当其以60帧每秒运行时，若是仍按照每帧位移一米，则结果变成60m/s，这是显然错误的。

故需要deltaTime，其可以理解为完成上一帧所需时间或是说两帧之间的间隔时间。所以将速度（每秒移动的距离）乘以deltaTime（两帧间隔时间），获得的便是每帧移动的距离（m/帧）。这样只需要获取当前deltaTime，便可以正常渲染画面，而不用担心因为帧率不同而导致结果不同。

（2）更新速度

vec3.scaleAndAdd = function(out, a, b, scale) {
    out[0] = a[0] + (b[0] * scale);
    out[1] = a[1] + (b[1] * scale);
    out[2] = a[2] + (b[2] * scale);
    return out;
};

通过以上函数更新速度和角速度，用3个方向的速度乘以增量时间求得变化距离，求得当前位置，并赋值，返回新的位置数组。