Return smoothed drag end velocity with event
This commit is contained in:
parent
691dc21a4d
commit
c7d1fe0c0c
7 changed files with 177 additions and 12 deletions
|
@ -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">
|
||||
|
|
|
@ -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
42
examples/physics/index.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue