Three.js中的相机旋转问题

时间:2019-01-09 09:54:20

标签: javascript three.js camera rotation

我无法在一定程度上旋转Three.js场景中的相机。

目标是使照相机沿使用网格的位置和旋转构造的路径进行补间。沿位置补间可以很好地工作,但是旋转只能如此。相机旋转可以正常工作,直到大约90度到270度为止。我只是绕着y轴旋转相机,所以除非我了解云台,否则我认为万向节锁定不会引起这里的问题-锁定错误。

在此处查看所需的路径: Example Camera Path
这表明相机从网格1开始,并沿每个网格补间其位置。它也尝试旋转到网格的旋转,直到网格的第三个或第四个节点出现旋转并出现镜像或偏移的情况下,它才能正常工作。

在此处查看另一个示例,显示可视化的摄像机方向: Camera Direction visualized along another path
红线表示照相机视锥的方向,圆锥体指示照相机应面向的方向。顶部的值是网格沿其y轴的旋转值。您可以看到在135和260旋转时,红线与圆锥的方向不匹配。

代码没有太多内容-它使用tween.js来简单地使用数组作为要插值的值来旋转摄像机的y值。我尝试过不使用插值,而只是直接补间不匹配的旋转,这似乎也是错误的。

let r = new TWEEN.Tween(common.camera.rotation, this.tweens)
    .to({
        y: path.rotations.y
    }, 5000)
    .easing(TWEEN.Easing.Linear.None);

其中path.rotations.y是Y值[0.0174, 0.436, -1.047, -1.570, -0.806]的数组(这些值对应于第一个图像的旋转,而不是第二个图像的旋转)。

还应注意,Blender的旋转似乎与Threejs中的旋转不匹配。例如。圆锥6的旋转度为226度,即3.94444弧度。但是Threejs中的旋转列为-0.806弧度。但是,从视觉上看,它们出现在场景中。我正在使用Blender和GLTF Exporter插件导出场景。

预期结果是摄像机的旋转与圆锥的旋转匹配,但实际上它们只是在一定程度上匹配。

实时示例: http://davidpuetter.com/games/threejs-test/
单击游戏以开始补间。完成后,按Q键从上方查看。您可以在右上角看到这些行不匹配。

代码在这里可用: https://github.com/davidpox/threejs-test
抱歉,代码很乱,已从NDA下的项目中剔除。

0 个答案:

没有答案