TrackballControls with Collada kfAnimation Three JS



嗨,我正在使用Collada模型的Kfanimation Animation。我想包括一个轨迹球控件,但是当我超过尺寸堆栈时,我不知道为什么我的代码为以下

        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();
            }

我试图将控件更新放入动画和启动功能中,但我认为它消耗了大量资源。我也试图将其放入渲染中,但结果相同。

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

最后我找到了解决方案,这是一个选项启用 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 );

最新更新