Question

这个问题来自Orient object's rotation to a spline point tangent in THREE.JS，但不是沿着路径定向网格，我无法定位相机。

完整的来源位于this repo，但我已使用这些来源设置了jsfiddle。在我看来，问题在于函数setCameraOnSplinePath。我将样条曲线显示为紫色线条，以便于调试。

目标是将相机移动，就像汽车在网格表面上行驶一样，如果这有任何意义的话。

如果我只是像相机位置一样复制相机旋转，相机会以看似随机的方向滚动：

camera.position.x = camPos.x;
camera.position.y = camPos.y;
camera.position.z = camPos.z;

camera.rotation.x = camRot.x;
camera.rotation.y = camRot.y;
camera.rotation.z = camRot.z;

我现在已将相机固定在y轴和z轴上，并在x轴上略微倾斜：

if(camera.position.z <= 150) {
    camera.rotation.x = 0.7;
} else if(camera.position.z >= 180) {
    camera.rotation.x = 0;
} else {
    var r = ((180 - camera.position.z) / 30) * 0.7;
    camera.rotation.x = r;
}
camera.rotation.y = 0;
camera.rotation.z = 0;

我在y轴上尝试了几次旋转，但似乎没有任何效果。上面提到的答案的解决方案非常接近，但路径平行于网格而不是垂直。

const targetRotation = mobiusrune.degToRad(80); //0.7;
if(camera.position.z <= 120) {
    camera.lookAt(routeSpline.getPoint((camPosIndex+1) / fragmentSize));
    //camera.rotation.x = targetRotation;
    // camera.rotation.y = 0; //mobiusrune.degToRad(camPosIndex);
    // camera.rotation.z = 0; //mobiusrune.degToRad(-30);
} else if(camera.position.z >= 150) {
    camera.rotation.x = 0;
} else {
    var r = ((150 - camera.position.z) / 30) * targetRotation;
    camera.rotation.x = r;
}

Three.js沿样条线定向相机

0 个答案: