Add events for dragging
This commit is contained in:
parent
fb3f512fe6
commit
07383417de
3 changed files with 59 additions and 3 deletions
30
examples/events/index.html
Normal file
30
examples/events/index.html
Normal file
|
@ -0,0 +1,30 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>A-Frame Click & Drag Component - Events</title>
|
||||
<script src="../build.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a-scene>
|
||||
|
||||
<a-sphere
|
||||
click-drag
|
||||
position="0 1.25 -1"
|
||||
radius="1.25"
|
||||
color="#EF2D5E"
|
||||
event-set__1="_event: dragstart; material.opacity: 0.2"
|
||||
event-set__1="_event: dragend; material.opacity: 1"
|
||||
>
|
||||
<a-animation attribute="material.opacity" begin="dragstart" from="1.0" to="0.2" dur="200"></a-animation>
|
||||
<a-animation attribute="material.opacity" begin="dragend" from="0.2" to="1.0" dur="200"></a-animation>
|
||||
</a-sphere>
|
||||
|
||||
<a-plane rotation="-90 0 0" width="4" height="4" 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>
|
||||
</a-scene>
|
||||
</body>
|
||||
</html>
|
|
@ -21,9 +21,13 @@
|
|||
</head>
|
||||
<body>
|
||||
<h1>A-Frame Click & Drag Component</h1>
|
||||
<a href="basic/">Demo</a>
|
||||
<a 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>
|
||||
<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>
|
||||
|
||||
<!-- GitHub Corner. -->
|
||||
<a href="https://github.com/jesstelford/aframe-click-drag-component" class="github-corner">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue