javascript - 如何用requestAnimationFrame控制fps？

Question

我用过三个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);

}

How to control the animation speed. Is there have other ways or only through fps(frames per second).

How can I reduce the animation speed??..

Answer 1

您想控制 AnimationAction 循环的持续时间。为此，您可以使用此模式:

action.setDuration( 10 ).play();

three.js r.87