在A帧中平滑的摄像机旋转(外观控制)

Question

在我网站的测试版上工作

我正在使用一个框架的360部分的应用程序.这是我的相机代码片段

<a-camera mouse-cursor reverse-mouse-drag="true" id="cam" zoom="1.3"></a-camera>

我可以拖着鼠标四处看看。没问题，效果很好！但我想实现一个平稳的运动时，相机旋转(如在谷歌街景)。

我搜了很多遍，没找到多少。在切换到WebVR之前，我使用了WebVR。所以，我有拍摄镜头的概念，但是我不知道从A帧开始从哪里开始。

请帮帮忙？

提前感谢！

Answer 1

如果您想让相机在旋转之后旋转一段时间，那么：

1. 请记住，Aframe应该用于VR，移动相机的次数超过用户的要求，可能会引起严重的头痛。
2. 我没有看到任何现成的组件，只是一个讨论，所以如果你还想做，我有几个想法： ( a)便宜的版本，你用<e-entity>包好相机，然后在里面做一个<a-animation>。给它一个2000年的持续时间，一个开始的事件，和一些很好的放松。看看文档。然后制作一个组件来检查相机的旋转情况如下：

AFRAME.registerComponent('camera-check', {
  init: function () {
     var rotation, newRotation;
     camera = document.querySelector('a-camera');
     camera.addEventListener('componentchanged', function(evt) {
         if (evt.detail.name === 'rotation') {
         // here You have your new rotation reference in evt.detail.newData
         // and Your old rotation reference in evt.detail.oldData
         rotation = newData-oldData;
         if(rotation>0){
          newRotation = newData;
          newRotation.y +=15;
         }else{
          newRotation = newData;
          newRotation.y -=15;
         }
     });
  }
});

然后，听一听鼠标事件。当其触发时，将动画组件的to属性设置为newRotation，并发出启动动画的事件。

我希望你明白这个想法。得到轮转率。在鼠标上，找出你在旋转的方向，再移动一点。宽松政策应该会使其顺利进行。

生成附加实体的原因是，在对摄像机进行动画时，可以触发组件更改事件。您还可以进行标记检查，这将在动画进行时禁用组件更改事件。这将要求您进行2秒的超时，或者让监听器检查动画是否结束。(第二个选项要好得多，因为您可以得到动画结束的确切时刻)。

此外，如果您希望它更好，则需要获得实际的旋转速率：

1. 从侦听器中检查组件旋转了多少，然后将newRotes.y设置得更远或更近。
2. 通过检查tick()上的旋转来获得实际的旋转速率，然后得到一个旋转增量速度，并实际计算出您应该移动多远。但除非你做了一个科学项目，否则没必要这么具体。