是否可以使用three.js 补间轨道控件？

Question

在three.js 中使用TWEEN 函数时，我注意到它专门用于补间对象。

我可以对摄像机位置进行补间，但我还想对轨道控制进行补间。 这将模拟在相机在小车上时跟随目标。

目前相机位置是用这段代码补间的：

        var xTarget=0;
        var yTarget=0;
        var zTarget=0;

        function setupCamTween(xTarget,yTarget,zTarget){

        var update  = function(){
            camera.position.x = current.x;
            camera.position.y = current.y;
            camera.position.z = current.z;

        }   

        TWEEN.removeAll();

        var current = { x: myCameraX, y : myCameraY, z : myCameraZ };
        var target = { x : xTarget, y : yTarget, z : zTarget};

        console.log("moving cam");

        var camTween = new TWEEN.Tween(current).to(target, 1000);
        camTween.easing(TWEEN.Easing.Quadratic.InOut);


        camTween.start();



        camTween.onUpdate(function(){
            camera.position.x=current.x;
            camera.position.y=current.y;
            camera.position.z=current.z;


        });     
    }
setupCamTween(0,900,4000);

然后我使用此代码更改轨道上的目标。

controls.target.set(0,myCameraY,2000);
controls.update();

所以当我这样做时，相机会补间到该位置，然后它会跳转到目标控制点。

我想在设置轨道控制时摆脱跳跃。

所以我创建了一个如下函数来补间轨道控制：

    function orbitCam(){

        var update  = function(){
            controls.target.x=current.x;
            controls.target.y=current.y;
            controls.target.z=current.z;
        }
            //TWEEN.removeAll();

            var current = {x: myCameraX, y: myCameraY, z: myCameraZ };
            var target = {x: 0, y: 200, z: 0};

            var orbitTween = new TWEEN.Tween(current).to(target,2000);
            orbitTween.easing(TWEEN.Easing.Quadratic.InOut);

    orbitTween.onUpdate(function(){
        controls.target.set.x=current.x;
        controls.target.set.y=current.y;
        controls.target.set.z=current.z;


    }); 

    }

当我调用这个函数时，它什么也不做。 所以我想弄清楚是否可以对轨道控制目标的设置进行补间。 任何建议表示赞赏。

我在动画函数中调用控件更新。

    function animate() {

        requestAnimationFrame( animate );

        TWEEN.update();

        controls.update();

    }

我设法让以下代码工作。但不幸的是，在设定目标后，我失去了所有轨道控制。

    var xTarget=0;
    var yTarget=0;
    var zTarget=0;
    var tweenDuration=0;

    function setupCamTween(xTarget,yTarget,zTarget,tweenDuration){

    var update  = function(){
        camera.position.x = current_position.x;
        camera.position.y = current_position.y;
        camera.position.z = current_position.z;
        controls.target.x = current_target.x;
        controls.target.y = current_target.y;
        controls.target.z = current_target.z;

    }   

    //TWEEN.removeAll();

    var current_position = { x: myCameraX, y : myCameraY, z : myCameraZ };
    var target = { x : xTarget, y : yTarget, z : zTarget};

    var current_target = { x: myCameraX, y : myCameraY, z : myCameraZ };
    var new_target = {x : xTarget, y : yTarget, z : zTarget};

    console.log("moving cam");

    var camTween = new TWEEN.Tween(current_position).to(target, tweenDuration);
    camTween.easing(TWEEN.Easing.Quadratic.InOut);  
    camTween.start();

    var targetTween = new TWEEN.Tween(current_target).to(new_target, tweenDuration);
    targetTween.easing(TWEEN.Easing.Quadratic.InOut);   
    targetTween.start();

    camTween.onUpdate(function(){
    camera.position.x=current_position.x;
    camera.position.y=current_position.y;
    camera.position.z=current_position.z;


}); 

    targetTween.onUpdate(function(){
    controls.target.x = controls.object.position.x;
    controls.target.y = controls.object.position.y;
    controls.target.z = controls.object.position.z;
    controls.target.x = current_target.x;
    controls.target.y = current_target.y;
    controls.target.z = current_target.z;

});


}

Answer 1

我简化了代码，现在它可以工作了。 问题是代码将相机位置 z 值设置为控件目标 z。由于某种原因，这打破了轨道控制。

这是使用补间平移相机的简化版本。我的代码中的函数是在鼠标按下事件时调用的。

        var xTarget=0;
        var yTarget=0;
        var zTarget=0;
        var tweenDuration=0;

        function panCam(xTarget,yTarget,zTarget,tweenDuration){

          TWEEN.removeAll();

          var camNewPosition= { x : xTarget, y : yTarget, z : zTarget};
          var targetNewPos = {x : xTarget, y : yTarget, z : 0};

          var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut).start();
          var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut).start();
    }

        function animate() { //call this function at the beginning

            requestAnimationFrame( animate );

            TWEEN.update();

            controls.update();


        }
panCam(500,200,4000,1000);  //This pans the camera to the an x of 500, y of 200 and a z of 4000 with a duration of 1 second.