kumi/aframe-click-drag-component
1
0
Fork 0
Code Issues 1 Pull requests 3 Projects Releases 2 Packages Wiki Activity

Return smoothed drag end velocity with event

Browse source
This commit is contained in:
Jess Telford 2016-09-28 22:42:51 +10:00
parent 691dc21a4d
commit c7d1fe0c0c
7 changed files with 177 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

21
examples/index.html
View file

@ -12,22 +12,33 @@
h1 {
font-weight: 300;
}
a {
color: #FAFAFA;
a.demo-link {
display: block;
padding: 15px 0;
}
a {
color: #FAFAFA;
}
</style>
</head>
<body>
<h1>A-Frame Click & Drag Component</h1>
<a href="basic/">Basic Demo</a>
<a class="demo-link" href="basic/">Basic Demo</a>
<p>Click + Drag entities on the screen. Note the plane cannot be dragged (it does not have the "click-drag" attribute).</p>
<p>Try the WASD keys to move around while dragging an entity!</p>
<hr />
<a href="events/">Events Demo</a>
<a class="demo-link" href="events/">Events Demo</a>
<p>Events are fired for beginning to drag, ending a drag, and for each drag event in etween.</p>
<p>This example shows how those events can be used to "ghost" a dragged entity</p>
<p>This example shows how those events can be used to "ghost" a dragged entity.</p>
<hr />
<a class="demo-link" href="physics/">Physics Demo</a>
<p>Calculating the velocity at the time of drag end.</p>
<p>Combined with a physics library (for example; <a href="https://github.com/donmccurdy/aframe-extras/tree/master/src/physics">aframe-extras physics</a>), we get some very nice interactions.</p>
<p>Try gently tossing the ball around / throwing it at the ground.</p>
<!-- GitHub Corner. -->
<a href="https://github.com/jesstelford/aframe-click-drag-component" class="github-corner">

4
examples/main.js
View file

@ -1,3 +1,7 @@
import aframe from 'aframe';
import extras from 'aframe-extras';
import clickDragComponent from '../src/index';
extras.physics.registerAll(aframe);
clickDragComponent(aframe);

42
examples/physics/index.html Normal file
View file

@ -0,0 +1,42 @@
<html>
<head>
<title>A-Frame Click & Drag Component - Events</title>
<script src="../build.js"></script>
</head>
<body>
<a-scene physics="debug: true">
<a-sphere
click-drag
dynamic-body="mass: 20"
position="0 3 -1"
radius="1.25"
color="#EF2D5E"
>
</a-sphere>
<a-plane static-body rotation="-90 0 0" width="200" height="200" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 3.8">
<a-camera look-controls-enabled="false"></a-camera>
</a-entity>
<script>
var draggable = document.querySelector('[click-drag]');
draggable.addEventListener('dragstart', function(dragInfo) {
draggable.pause();
});
draggable.addEventListener('dragend', function(dragInfo) {
var x = dragInfo.detail.velocity.x;
var y = dragInfo.detail.velocity.y;
var z = dragInfo.detail.velocity.z;
draggable.play();
draggable.body.velocity.set(x, y, z);
console.log('drag end', dragInfo.detail.velocity);
});
</script>
</a-scene>
</body>
</html>