A-Frame 中的平滑相机旋转（外观控制）答案

【问题标题】：Smooth Camera Rotation (look-controls) in A-FrameA-Frame 中的平滑相机旋转（外观控制）
【发布时间】：2017-06-12 22:51:59
【问题描述】：

正在处理the beta of my website

我在应用程序的 360 部分使用 A-Frame。这是我的相机代码的 sn-p

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

我可以拖动鼠标环顾四周。没问题;效果很好！但是我想在相机旋转时实现平滑的运动（如Google Street View）。

我已经搜索了很多，但没有找到太多。在切换到 WebVR 之前，我使用了 Unity3D。所以，我有让相机移动的概念，但我不知道从 A-Frame 的哪里开始。

请帮忙？

提前致谢！

【问题讨论】：

标签： javascript aframe webvr

【解决方案1】：

如果您想在旋转后保持相机旋转一段时间：
1. 请记住，Aframe 应该用于 VR，如果移动相机超出用户的预期，可能会导致严重的头痛。

2.我还没有看到任何现成的组件，只是一个讨论，所以如果你还想做，我有几个想法：
a) 廉价版，您将相机包裹在<e-entity> 中，并在其中制作<a-animation>。给它一个 2000 的持续时间、一个开始事件和一些不错的缓动。查看documentation。然后制作一个组件来检查您的相机的旋转，如下所示：

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;
         }
     });
  }
});

然后，监听 mouseup 事件。当它被触发时，将动画组件的to 属性设置为newRotation 并发出一个启动动画的事件。

我希望你明白这一点。获取旋转速率。在 mouseup 上找到你旋转的方式并移动一点。宽松应该使它顺利。

制作附加实体是因为在为相机设置动画时，您可以触发组件更改事件。您还可以进行标志检查，这将在动画进行时禁用 componentchanged 事件。这将要求您超时 2 秒，或者让侦听器检查动画是否结束。（第二个选项更好，因为你得到了动画结束的确切时刻）。

此外，如果您想让它变得更好，您还需要获得实际的旋转速率：
1. 从监听器中检查组件旋转了多少，然后将 newRotation.y 设置得更远或更近。
2. 通过在tick() 上检查旋转得到实际的旋转速率，然后得到一个旋转增量速度，并实际计算你应该移动多远。但除非你在做一个科学项目，否则没必要这么具体。

【讨论】：

谢谢你！是的，有道理。开始研究它。让您随时了解进度。