如何使用requestAnimationFrame控制fps？

我用三個js使用了FBX格式。看起來像requestAnimationFrame是現在動畫事件的事實上的方法。動畫的速度非常快，就像閃電一樣。找不到任何解決方案來控制fps。如何使用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（每秒幀數）。

我怎樣才能降低動畫速度?? ..

來源

2017-10-06 Prasath V

您可以控制關系的動畫時間'performance.now（）'。 – Xufox

你的'stats.update'做了什麼？也許你還需要通過'clock.getDelta（）'並且使用它？您應該以某種方式進行編程，即FPS不會更改動畫速度。 –

嘗試'action.setDuration（10）.play（）;' – WestLangley

你要控制你的AnimationAction循環的持續時間。要做到這一點，你可以用這個模式：

action.setDuration(10).play();

three.js所r.87

來源

2017-10-07 16:58:48 WestLangley

如何使用requestAnimationFrame控制fps？

回答

相關問題