动画TweenJS相机具有补间功能,与起始位置无关吗?

问题描述

我正在使用ThreeJS,并在场景中启用了轨道和轨道控件。我正在使用以下设置来设置摄像头和轨道控件:

    // Camera
    const camera =
        new THREE.PerspectiveCamera(
                            THREE.MathUtils.radToDeg(0.8),window.innerWidth / window.innerHeight,0.1,1000
                        );
    
    const controls =
        new THREE.OrbitControls(camera,self.renderer.domElement);
        
    camera.position.set(0,1.4,3.1);
    controls.target = new THREE.Vector3(0,0.8,0);
    controls.screenSpacePanning = true;
    controls.update();

我的工作流程如下:

  • 将摄像机移动到场景中的各个位置,通过将当前摄像机位置的X,Y,Z值保存为Vector3对象来捕获摄像机路径的路点

     aryWaypoints[ndx] = g_ImprovSceneObj.camera.position;   
    
  • 然后,我使用状态机通过ThreeJS补间库执行转换。每一步都将开始一个新的补间,其起始位置是当前相机位置,目的地位置是我之前捕获的航路点之一:

     let cloneCameraPos = self.camera.position.clone();
     let tweeningAlgorithm = TWEEN.Easing.Linear.None;
     setupPositionTween(cloneCameraPos,aryWaypoints[ndx],tweeningAlgorithm,1000);
    

我遇到的问题是,如果我开始的航路点拍摄时没有从与摄像机设置的位置完全相同的位置开始,则摄像机在两个方向均关闭捕捉航路点时的位置和旋转角度。如果我确实从那个完全相同的起始位置开始,则所有过渡都将在所需的摄像机位置和旋转位置处结束。如果不正确,则航路点看起来不正确,表明我捕获航路点的方式不是与当前相机方向无关。

我需要做些什么来捕获路点,然后重播这些路点,无论以前的路点或起始位置是什么,它们总是会返回到我期望的确切摄像机视角/方向?

下面是我用来设置补间动画以在处理下一个航路点时为相机设置动画的功能。

    function setupPositionTween(startPos,targetPos,durationMS) {
        let errPrefix = `(setupPositionTween) `;
        
        if (typeof durationMS !== 'number')
            throw new Error(errPrefix + `The value in the durationMS parameter is not number.`);
            
        if (durationMS < 0)
            throw new Error(errPrefix + `The durationMS parameter is negative.`);
    
        new TWEEN.Tween (startPos)
        .to (targetPos,durationMS)
        .easing (tweeningAlgorithm)
        .onUpdate (
        function() {
            // Copy the desired position into the camera position.
            self.camera.position.copy(startPos);
        })
        .start();
    }

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)