A-frame User Swipe Effect For 360 Image
I have a 360 Image using aframe.io library. And I would like to see how to create a 'throw' effect. [Not sure what the effect calls] When user swipe left or right, the 360 images
Solution 1:
One way to do this is using super-hands to handle the swipe-to-throw and aframe-physics-system to handle the spinning and deceleration (with a little help from aframe-physics-extras)
<!DOCTYPE html><html><head><title>Swipe to spin photosphere</title><scriptsrc="https://aframe.io/releases/0.7.0/aframe.min.js"></script><scriptsrc="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v2.1.0/dist/aframe-physics-system.min.js"></script><scriptsrc="https://unpkg.com/super-hands/dist/super-hands.min.js"></script><scriptsrc="https://unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script></head><body><a-scenephysics="gravity: 0"><a-assets><a-mixinid="static"static-body="shape: sphere; sphereRadius: 0.2"></a-mixin><!-- the z position of the grabber determines the leverage/force for swipes --><a-mixinid="grabber"physics-colliderposition="0 0 -25"collision-filter="collisionForces: false"super-hands="colliderEvent: collisions;
colliderEventProperty: els;
colliderEndEvent: collisions;
colliderEndEventProperty: clearedEls"></a-mixin><imgid="pano"src="https://your image url here"crossorigin="anonymous"/><videoid="video360"src="https://your video url here"crossorigin="anonymous"/></a-assets><!-- progressive-controls sets up mouse/touch input --><a-entityprogressive-controls="maxLevel: gaze; gazeMixin: grabber"></a-entity><a-entityid="bottom"mixin="static"position="0 -100 0"></a-entity><a-entityid="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-entityid="sky"geometry="primitive: sphere; radius: 100"material="src: #pano; side:front"grabbablescale="-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>
Post a Comment for "A-frame User Swipe Effect For 360 Image"