javascript - A 帧中的平滑相机旋转(外观控制)

Question

正在处理 the beta of my website

我正在为应用程序的 360 部分使用 A-Frame。这是我的相机代码片段

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

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

我搜索了很多，但没有找到太多。在切换到 WebVR 之前，我使用的是 Unity3D。所以，我有了 lerping 相机运动的概念，但我不知道在 A 帧中从哪里开始。

请帮忙？

提前致谢!

Answer 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() 上的旋转来获取实际旋转速率，然后获取旋转增量速度，并实际计算你应该移动多远。但除非您正在进行科学项目，否则无需如此具体。