A帧中的光滑相机旋转（外观控制）

Question

处理the beta of my website

我正在为应用程序的360部分使用A帧。这是我的摄像头代码片段

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

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

我搜索了很多，并没有发现太多。在切换到WebVR之前，我使用了Unity3D。所以，我有了摄像机移动的概念，但我不知道从A帧开始从哪里开始。

请帮忙？

提前致谢！

Answer 1

如果你想后，您旋转它，然后保持相机的同时旋转：
1.请紧记AFRAME被认为是为VR，移动相机多用户希望它可能会导致严重的头痛。

2.我还没有看到任何现成的组件，只是供讨论，所以如果你还是想做到这一点，我有几个观点：
一）廉价版，在那里你包裹在<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（）上的旋转来获取实际旋转速率，然后获得旋转变化速度，并实际计算应该移动多远。但除非你正在进行科学项目，否则不需要这么具体。