Javascript 如何使用requestAnimationFrame控制fps？

我用了三个js的FBX格式。现在看来，requestAnimationFrame实际上是为事物设置动画的方式。动画的速度非常快，就像闪电一样。找不到任何控制fps的解决方案

请参见下图

源代码：

if (!Detector.webgl)
 Detector.addGetWebGLMessage();

var container, stats, controls;
var camera, scene, renderer, light, mesh;

var clock = new THREE.Clock();

var mixers = [];

var mouseX = 0, mouseY = 0;
var spdx = 0, spdy = 0;
var windowHalfX = window.innerWidth / 2;
 var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);

scene = new THREE.Scene();

// grid
var gridHelper = new THREE.GridHelper(28, 28, 0x303030, 0x303030);
gridHelper.position.set(0, -0.04, 0);
scene.add(gridHelper);

// stats
stats = new Stats();
container.appendChild(stats.dom);

// model
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
    console.log(item, loaded, total);
};

var onProgress = function (xhr) {
    if (xhr.lengthComputable) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
};
var onError = function (xhr) {
    console.error(xhr);
};

var loader = new THREE.FBXLoader(manager);
loader.load('assests/JetEngine_Ani.fbx', function (object) {
    object.mixer = new THREE.AnimationMixer(object);
    mixers.push(object.mixer);
    var action = object.mixer.clipAction(object.animations[ 0 ]);
    action.play();
    scene.add(object);

}, onProgress, onError);
renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setClearColor(0xdddddd, 1);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 12, 0);
camera.position.z = 850;
controls.update();

window.addEventListener('resize', onWindowResize, false);

light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
light.position.set(0, 1, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(0, 1, 0);
scene.add(light); }


 function onWindowResize() {
  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);  }

function onDocumentMouseMove(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
 }
function animate() {
  requestAnimationFrame(animate);

  if (mixers.length > 0) {
    for (var i = 0; i < mixers.length; i++) {
        mixers[ i ].update(clock.getDelta());
    }
}
stats.update();
render();
}
function render() {

renderer.render(scene, camera);

}

if（！Detector.webgl）
Detector.addGetWebGLMessage（）；
var容器、stats、控件；
var摄影机、场景、渲染器、灯光、网格；
var clock=新的三个时钟（）；
var混频器=[]；
var mouseX=0，mouseY=0；
变量spdx=0，spdy=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，12000）；
场景=新的三个。场景（）；
//网格
var gridHelper=新的三个.gridHelper（28,28,0x303030,0x303030）；
gridHelper.position.set（0，-0.04,0）；
添加（gridHelper）；
//统计数据
统计数据=新统计数据（）；
appendChild（stats.dom）；
//模型
var-manager=new-THREE.LoadingManager（）；
manager.onProgress=功能（项目、已加载、总计）{
控制台日志（项目、已加载、总计）；
};
var onProgress=函数（xhr）{
if（xhr.长度可计算）{
var percentComplete=xhr.loaded/xhr.total*100；
log（Math.round（完成百分比，2）+'%download'）；
}
};
var onError=函数（xhr）{
控制台错误（xhr）；
};
var loader=新的三个.FBXLoader（管理器）；
loader.load（'assests/JetEngine_Ani.fbx'，函数（对象）{
object.mixer=new THREE.AnimationMixer（对象）；
混合器。推送（对象。混合器）；
var action=object.mixer.clipAction（object.animations[0]）；
动作。游戏（）；
场景。添加（对象）；
}，onProgress，onError）；
renderer=new THREE.WebGLRenderer（{alpha:true}）；
渲染器.setClearColor（0xDDDD，1）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.domeElement）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
控制目标集（0,12,0）；
摄像机位置z=850；
控件更新（）；
addEventListener（'resize'，onWindowResize，false）；
灯光=新的三个半球灯光（0xffffff，0x444444，1.0）；
光。位置。设置（0，1，0）；
场景。添加（灯光）；
光=新的三方向光（0xffffff，1.0）；
光。位置。设置（0，1，0）；
场景。添加（灯光）；}
函数onWindowResize（）{
windowHalfX=window.innerWidth/2；
windowHalfY=window.innerHeight/2；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth，window.innerHeight）；}
onDocumentMouseMove函数（事件）{
mouseX=event.clientX；
mouseY=event.clientY；
}
函数animate（）{
请求动画帧（动画）；
如果（mixers.length>0）{
对于（变量i=0；i

如何控制动画速度。是否有其他方法或仅通过fps（每秒帧数）进行

如何降低动画速度

---

您希望控制

动画动作

循环的持续时间。为此，您可以使用以下模式：

action.setDuration( 10 ).play();

---

three.js r.87

您可以通过

performance.now（）

控制与时间相关的动画。您的

stats.update

做什么？也许您还需要传递

clock.getDelta（）

并使用它？。您应该以FPS不改变动画速度的方式编程。请尝试

action.setDuration（10.play（）@WestLangley谢谢你，伙计。。它起作用了。你能把这个贴出来作为答案吗。