Question

这更像是一个后续问题 A-Frame user swipe effect for 360 Image

滑动鼠标会导致视频或图像旋转。尽管如此，鼠标无法抓住场景并拖动。因为当它向左拖动时，场景向右移动并向左反弹，好像超级手与相机冲突，一个人想要以另一个方式相反，另一个则旋转另一个。或者，当鼠标仍然抓住物体时，超级手正在努力旋转，因此它会左右反弹场景。

我试过了：

look-controls="reverseMouseDrag: true"设为true，false为相机以帮助对齐旋转
invert=true为天空a-entity。

但我不认为以上是问题所在。所以我试过了：

对于天空a-entity，我试图在ondragstart上设置更高的阻力，然后降低ondragend以减少反弹效果。将angularDamping设置为1将阻止球体旋转。

dynamic-body =＆＃34; angularDamping：1＆＃34; //防止旋转

// DOM似乎得到更新，但对行为没有影响。 ondragstart =＆＃34; this.setAttribute（＆＃39; dynamic-body＆＃39;，{angularDamping：1}）＆＃34; ondragend =＆＃34; this.setAttribute（＆＃39; dynamic-body＆＃39;，{angularDamping：0.5}）＆＃34;

请让我知道我做错了什么，并指出了正确的方向。谢谢。

＆＃13;

<!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">
  <!-- Original camera, now it is embedded within progressive-controls -->
  <!--<a-camera id="vr-camera" look-controls="reverseMouseDrag: true" position="0 0 0" rotation="0 90 0" fov="60"></a-camera>-->
  
    <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://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" crossorigin="anonymous" />
      <video id="video360" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" crossorigin="anonymous" />
    </a-assets>
    <!-- progressive-controls sets up mouse/touch input -->
    <a-entity progressive-controls="maxLevel: gaze; gazeMixin: grabber">
        <a-camera id="vr-camera" look-controls="reverseMouseDrag: false" position="0 0 0" rotation="0 90 0" fov="60"></a-camera>
    </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>

＆＃13;

A-Frame超级手可以轻扫360度视频和图像

0 个答案:

A-Frame超级手可以轻扫360​​度视频和图像

0 个答案:

A-Frame超级手可以轻扫360度视频和图像