Question

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

我可以补间摄像机位置，但我想补间轨道控制。当相机在小车上时，这将模仿目标。

目前使用以下代码补码相机位置：

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;

});


}

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

struct SSlice {
    void *pData;
    size_t length;
};

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.

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

1 个答案: