TrackballControls与Collada kfAnimation Three JS

时间:2016-12-08 16:40:31

标签: three.js collada trackball

大家好我正在使用Collada模型的kfAnimation动画。我想要包含一个轨迹球控件,但当我这样做时,我超过了大小堆栈,我不知道为什么我的代码是以下

        function init() {

                    initRender();
                    // Camera
                    initCamera();
                    // Scene
                    initScene();
                    //controlls
                    initControls();

                    initGrid(); 

                    loadObjectAnimatedFrames();


                    window.addEventListener( 'resize', onWindowResize, false );
                }
    function loadObjectAnimatedFrames(){
                    loader = loader.load( 'sources/crack-animated.dae', function ( collada ) {
                    model = collada.scene;
                    animations = collada.animations;
                    kfAnimationsLength = animations.length;
                    //model.scale.x = model.scale.y = model.scale.z = 0.125; // 1/8 scale, modeled in cm

                    for ( var i = 0; i < kfAnimationsLength; ++i ) {
                        var animation = animations[ i ];
                        var kfAnimation = new THREE.KeyFrameAnimation( animation );
                        kfAnimation.timeScale = 1;
                        kfAnimations.push( kfAnimation );
                    }
                    start();
                    animate( lastTimestamp );
                    scene.add( model );
                    });
                }
    function initControls(){

                     controls = new THREE.TrackballControls(camera);
                     controls.minDistance = 100;
                     controls.maxDistance = 1800;
                     controls.addEventListener('change',render);

                  }
function animate( timestamp ) {
                var frameTime = ( timestamp - lastTimestamp ) * 0.001;
                if ( progress >= 0 && progress < 48 ) {
                    for ( var i = 0; i < kfAnimationsLength; ++i ) {
                        kfAnimations[ i ].update( frameTime );
                    }
                } else if ( progress >= 48 ) {
                    for ( var i = 0; i < kfAnimationsLength; ++i ) {
                        kfAnimations[ i ].stop();
                    }
                    progress = 0;
                    start();
                }
                //pointLight.position.copy( camera.position );
                progress += frameTime;
                lastTimestamp = timestamp;

                render();

            }

我试图将控件更新放在animate和start函数中,但我认为它消耗了大量资源。此外,我试图将内部渲染但相同的结果。

感谢您的帮助,我希望更多的实验可以帮助我。

1 个答案:

答案 0 :(得分:0)

最后我找到了解决方案,它是一个选项 enableDamping dampingFactor

 function initControls(){
                controls = new THREE.TrackballControls( camera, renderer.domElement );
                //controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
                controls.enableDamping = true;
                controls.dampingFactor = 0.25;
                controls.enableZoom = false;
            }

之后我只需添加 controls.update();

renderer.render( scene, camera );
            requestAnimationFrame( animate );