如何解决动画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 举报,一经查实,本站将立刻删除。