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 (초당 프레임)를 통해서만 가능합니다. 내가 애니메이션 속도를 ?? 줄일 수있는 방법

..

Answer 1

당신은 당신의 AnimationAction 루프의 지속 시간을 제어 할 수 있습니다. 이렇게하려면, 당신은이 패턴을 사용할 수 있습니다

action.setDuration(10).play(); 

three.js를 r.87