代码之家  ›  专栏  ›  技术社区  ›  Prasath V

如何使用requestAnimationFrame控制fps?

  •  1
  • Prasath V  · 技术社区  · 7 年前

    我使用了FBX格式和三个js。现在,requestAnimationFrame似乎是制作动画的实际方式。动画运行速度很快,就像闪电一样。无法找到任何解决方案来控制fps。

    请参见下图。

    jet

    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 回复  |  直到 7 年前
        1
  •  2
  •   WestLangley    7 年前

    您希望控制 AnimationAction 环为此,您可以使用以下模式:

    action.setDuration( 10 ).play();
    

    三js r.87