360 度图像的 A-Frame 用户滑动效果

Posted

技术标签:

【中文标题】360 度图像的 A-Frame 用户滑动效果【英文标题】:A-Frame user swipe effect for 360 Image 【发布时间】:2017-11-27 19:25:14 【问题描述】:

我有一个使用 aframe.io 库的 360 度全景图像。我想看看如何创建“投掷”效果。 [不知道效果叫什么]当用户向左或向右滑动时,360 度图像将旋转/旋转到任一方向并最终在一段时间后完成(可能取决于滑动的力度?)。

我正在考虑在 a-sky 中使用 a-animation 可以解决问题,但我想问一下这是否是正确的方法。

效果类似于 http://photo-sphere-viewer.js.org/

谢谢。

<a-sky id="vr-sky">
          <a-animation attribute="rotation"></a-animation>
        </a-sky>
        
        
<!-- Or use animation component -->
 <a-sky id="vr-sky"
          animation__rotation="property: rotation; dur: 2000; easing: easeInOut; to: 0 360 0">         
        </a-sky>

【问题讨论】:

不能像下面这样使用超级手,因为当鼠标按下时屏幕会左右弹跳 【参考方案1】:

一种方法是使用super-hands 处理滑动投掷和aframe-physics-system 处理旋转和减速(在aframe-physics-extras 的帮助下)

Live Demo

<!DOCTYPE html>
<html>
 <head>
  <title>Swipe to spin photosphere</title>
  <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v2.1.0/dist/aframe-physics-system.min.js"></script>
  <script src="https://unpkg.com/super-hands/dist/super-hands.min.js"></script>
  <script src="https://unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script>
</head>

<body>
  <a-scene physics="gravity: 0">
    <a-assets>
      <a-mixin id="static" static-body="shape: sphere; sphereRadius: 0.2"></a-mixin>
      <!-- the z position of the grabber determines the leverage/force for swipes -->
      <a-mixin id="grabber" physics-collider position="0 0 -25"
               collision-filter="collisionForces: false"
               super-hands="colliderEvent: collisions;
                            colliderEventProperty: els;
                            colliderEndEvent: collisions;
                            colliderEndEventProperty: clearedEls">
      </a-mixin>
      <img id="pano" src="https://your image url here" crossorigin="anonymous"/>
      <video id="video360" src="https://your video url here" crossorigin="anonymous"/>
    </a-assets>
    <!-- progressive-controls sets up mouse/touch input -->
    <a-entity progressive-controls="maxLevel: gaze; gazeMixin: grabber"></a-entity>
    <a-entity id="bottom" mixin="static" position="0 -100 0"></a-entity>
    <a-entity id="top" mixin="static" position="0 100 0"></a-entity>
    <!-- use an entity with a sphere because a-sky seems to have its rotation locked down -->
    <!-- angularDamping sets the deceleration rate and the constraints limit rotation to Y axis -->
    <!-- src can be #pano or #video360 -->
    <a-entity id="sky" geometry="primitive: sphere; radius: 100" material="src: #pano; side:front" grabbable 
              scale="-1 1 1"
              dynamic-body="angularDamping: 0.5"
              constraint__1="type: pointToPoint; target: #bottom; collideConnected: false; pivot: 0 -100 0"
              constraint__2="type: pointToPoint; target: #top; collideConnected: false; pivot: 0 100 0">
    </a-entity>
  </a-scene>
</body>
</html>

【讨论】:

谢谢。当我点击现场演示链接时,我看到的是一个平面 360 度图像。你能告诉我如何正确运行它吗? 我不明白您所说的“平面 360 度图像”是什么意思。这是正在运行的 A-Frame 场景的直接链接:cumbersome-leopard.glitch.me 有帮助吗? "flat" 表示它不在球体或天空中,好像我只是在查看原始图像。 对于其他人, scale="-1 1 1" 将使用 side: front 而不是 back。这太棒了! @Alocus 你能用正确的比例和边设置来编辑我的答案吗?当您有可分享的内容时,我也很想尝试视频版本

以上是关于360 度图像的 A-Frame 用户滑动效果的主要内容,如果未能解决你的问题,请参考以下文章

前端优化-改善滑动流畅度的几类方法

A-sky a-frame 圆形边框

SnapHelper实现RecyclerView滑动对齐效果

在 ViewFlipper 或 ViewPager 中滑动图像

嵌入场景时 A 帧鼠标跟踪发生变化

HighGUI图形图像界面初步——滑动条的创建和使用