requestAnimationFrameでfpsを制御する方法は？

Question

FBX形式を3つ使用しています。 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); 

} 

。他の方法があるか、またはfps（1秒あたりのフレーム数）でしかありません。あなたのAnimationActionループの持続時間を制御する方法を、私は??アニメーションの速度を減らすことができます。..

Answer 1

。あなたは `performance.now（）`と時間との関係でアニメーションを制御することができます

action.setDuration(10).play(); 

three.js r.87