Question

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

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

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

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

请帮帮忙？

提前致谢！

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并发出动画开始的事件。

我希望你明白这个主意。获得转速。在鼠标上找到你旋转和移动的方式。宽松应该使它顺利。

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

此外，如果您希望它更好，您还需要获得实际的转速：
1.从听众处检查组件旋转了多少，然后进一步或更近地设置newRotation.y 2.通过检查tick（）上的旋转来获得实际旋转速率，然后获得旋转增量速度，并实际计算您应该移动多远。但除非你正在制作科学项目，否则不需要如此具体。

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

1 个答案: