Comment contrôler fps avec requestAnimationFrame?

Question

J'ai utilisé le format FBX avec trois js. Il semble que requestAnimationFrame est le moyen de facto d'animer les choses maintenant. L'animation fonctionnait très vite, comme l'éclair. Impossible de trouver des solutions pour contrôler le fps.

Voir l'image ci-dessous.

code source:

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); 

} 

Comment contrôler la vitesse d'animation. Y at-il d'autres moyens ou seulement à travers fps (images par seconde).

Comment puis-je réduire la vitesse d'animation ?? ..

Answer 1

Vous voulez contrôler la durée de la boucle AnimationAction. Pour ce faire, vous pouvez utiliser ce modèle:

action.setDuration(10).play(); 

Three.js R.87