[英]A-Frame user swipe effect for 360 Image
I have a 360 Image using aframe.io library. 我有一个使用aframe.io库的360度图片。 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?).
[不确定效果如何]当用户向左或向右滑动时,360图像将旋转/旋转至任一方向,并最终在一段时间后完成(可能取决于滑动的力度?)。
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 http://photo-sphere-viewer.js.org/ 效果类似于http://photo-sphere-viewer.js.org/
Thank. 谢谢。
<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>
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
) 实现此目的的一种方法是使用
super-hands
来处理aframe-physics-system
和aframe-physics-system
来处理旋转和减速(在aframe-physics-extras
帮助下)
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.