10805

A-Frame user swipe effect for 360 Image

Question:

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 will rotate/spin to either direction and eventually finish after sometime (perhaps depends on how hard the swipe is?).

I am thinking of having a a-animation within a a-sky can do the trick, but I would like to ask someone whether this is the right approach.

The effect would be similar to <a href="http://photo-sphere-viewer.js.org/" rel="nofollow">http://photo-sphere-viewer.js.org/</a>

Thank.

<pre class="snippet-code-html lang-html prettyprint-override"><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>

Answer1:

One way to do this is using <a href="https://github.com/wmurphyrd/aframe-super-hands-component" rel="nofollow">super-hands</a> to handle the swipe-to-throw and <a href="https://github.com/donmccurdy/aframe-physics-system" rel="nofollow">aframe-physics-system</a> to handle the spinning and deceleration (with a little help from <a href="https://github.com/wmurphyrd/aframe-physics-extras" rel="nofollow">aframe-physics-extras</a>)

<a href="https://cumbersome-leopard.glitch.me/" rel="nofollow">Live Demo</a>

<!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>

Recommend

  • Stitching large amounts of images together into one gigapixel image
  • Kinect painting C#, WPF, SDK Kinect
  • JQuery distinct between smartphones, tablet or computers with different sizes but the same $(window)
  • 64-bit Linux Proprietary Software Copy/IP Protection
  • Android: Verifying the application's integrity on the server side
  • What renders the HTML?
  • Error in running trace32 with command line
  • PHP regex and compare variables in a string
  • Map an image onto a sphere and plot 3D trajectories
  • SelectChannelConnector alternative class in Jetty 9 and above
  • Phabricator extremely slow
  • Hashing Password [duplicate]
  • How to delete an associated object in Entity Framework without having access to the object context
  • raycast wont hit collider after using NGUI?
  • Regex: Find a character anywhere in a document but only on lines that begin with a specific word
  • Learning about game development, any books recommended? [closed]
  • Why do DirectX fullscreen applications give black screenshots?
  • “object not found” and “unexpected symbol” errors when timing R code with system.time()
  • TabLayout cannot be resolved to a type- Eclipse
  • Android Notification Without R.java
  • CORBA :: Get the client ORB address and port with use of IIOP
  • How do I get the data from a finished `NSURLSessionDataTask`?
  • Adding millions of nodes to neo4j spatial layer using cypher and apoc
  • Add Jpanel to Jframe NetBeans
  • How to convert Neo4j Result to GraphJSON
  • Recursion in ASP.NET Core Razor views
  • C# COM Component Fails To Read Config When Loaded Into An Unmanaged C++ App
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • Insertion large number of Entities into SQL Server 2012 [duplicate]
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • how to get data attributes of dynamically generated element
  • Position: fixed nav does not stay fixed
  • Django rest serializer Breaks when data exists
  • How to rebase a series of branches?
  • Azure Cloud Service Web Role web pages do not load
  • what is the difference between the asp.net mvc application and asp.net web application
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • Proper folder structure for lots of source files
  • How does Linux kernel interrupt the application?