Skip to content

Commit 0e1f22a

Browse files
wmurphyrdwmurphyrd
committed
Merge branch 'master' into feature/stretchable-world-pos
2 parents 24feda2 + 94cebeb commit 0e1f22a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+87589
-17159
lines changed

‎README.md‎

Lines changed: 97 additions & 253 deletions
Large diffs are not rendered by default.

‎dist/super-hands.js‎

Lines changed: 102 additions & 418 deletions
Large diffs are not rendered by default.

‎dist/super-hands.min.js‎

Lines changed: 14 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/build.js‎

Lines changed: 79824 additions & 566 deletions
Large diffs are not rendered by default.

‎examples/events/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<html>
22
<head>
33
<title>A-Frame Super Hands Component - GlobalEventHandler Integration</title>
4-
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
4+
<!-- Replace "../build.js" with the super-hands and
5+
A-Frame distributions to run : -->
6+
<script src="../build.js"></script>
7+
<!-- <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> -->
8+
<!-- <script src="https://unpkg.com/super-hands/dist/super-hands.min.js"></script> -->
59
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.12.4/dist/aframe-extras.min.js"></script>
610
<script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
7-
<!-- Replace "../build.js" with the super-hands distribution to run locally:
8-
"https://unpkg.com/super-hands/dist/super-hands.min.js" -->
9-
<script src="../build.js"></script>
1011
<script>
1112
function randomizeColor (target) {
1213
target.setAttribute('color','#'+Math.random().toString(16).substr(-6));

‎examples/index.html‎

Lines changed: 18 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -67,37 +67,30 @@ <h1>A-Frame Super Hands Component</h1>
6767
</a>
6868
for super-easy hand controller interactivity in A-Frame WebVR experiences.
6969
</p>
70-
<h2>Progressive Controls</h2>
71-
<p>These examples use the <code>progressive-controls</code> component
72-
to provide experiences that work across the full range of VR devices
73-
and provide the controller interaction best suited to the current device.
74-
</p>
75-
<a id="physics" class="example" href="physics/">Progressive controls
70+
<a id="physics" class="example" href="physics/">Hand controls
7671
with physics<br />
7772
<img class="preview" src="./assets/physics.jpg"/>
7873
<div class="bonus"></div>
7974
</a>
8075
<p><ul>
8176
<li>Grabbed boxes lock position and rotation to controller</li>
82-
<li>Grabbed boxes appear in wireframe when held inside the color changer box</li>
8377
<li><code>color-randomizer</code> changes the color of entities dropped inside of the color changer box</li>
84-
<li>Boxes can be stretched with two hands to change size, and their physical properties adapt</li>
78+
<li>Boxes can be stretched with two hands to change size, updating their physics bodies</li>
8579
</ul></p>
86-
<p>Example of super-hands interactivity with the
87-
<code>progressive-controls</code> component that adapts to any VR device
88-
and <code>afame-physics-system</code>. Also includes
89-
<code>color-randomizer</code>,
90-
an example of creating a component to customize the response to cues
91-
from<code>super-hands</code>:</p>
80+
<p>Example of super-hands interactivity with roomscale tracked controllers
81+
and <code>aframe-physics-system</code>. Also showcases creating a simple
82+
custom reaction component.</p>
9283
<pre>
9384
AFRAME.registerComponent('color-randomizer', {
9485
play: function() {
9586
this.el.addEventListener('drag-drop', function(evt) {
9687
evt.detail.dropped.setAttribute('material', 'color',
97-
'#'+(Math.random()*0xFFFFFF<<0).toString(16));
98-
});
88+
'#'+(Math.random()*0xFFFFFF<<0).toString(16))
89+
// notify super-hands that the gesture was accepted
90+
evt.preventDefault()
91+
})
9992
}
100-
});
93+
})
10194
</pre>
10295
<p class = "unemph">Credit for random color generator code: <a href="http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript#comment6801353_5365036">Mohsen via StackOverflow</a></p>
10396
<a id="mouse" class="example" href="mouse/">
@@ -106,97 +99,26 @@ <h2>Progressive Controls</h2>
10699
<img class="preview" src="./assets/hand-controls.jpg"/>
107100
<div class="bonus"></div>
108101
</a>
102+
<p><a href="mouse/index-laser.html">Laser pointer setup for 3DOF controllers</a></p>
103+
<p><a href="mouse/index-mouse.html">Mouse cursor based version for desktop</a></p>
109104
<p><ul>
110105
<li>Grabbed entities move by controller position and rotation</li>
111106
<li>Drag-drop targets and their hovering entity appear in wireframe</li>
112107
<li>Entities change to spheres upon completing drag-drop interaction via the
113108
<code>event-set</code> component listening for the 'drag-drop' event</li>
114109
</ul></p>
115-
<p>When full VR controllers aren't available,
116-
<code>progressive-controls</code> will fall back to laser pointer
117-
controlers when there is a 3-DOF controller detected (GearVR or Daydream)
118-
and to gaze-based control is there are no controllers. You can also
119-
force laser pointer controls even with Vive/Oculus by setting the
120-
<code>maxLevel</code> property on <code>progressive-controls</code>,
121-
as in this example.</p>
122-
<p>Under the hood, this works by using the <code>raycaster</code> A-Frame
123-
component for collision detection.
124-
This configuration is below for reference, but it is implemented
125-
automatically by <code>progressive-controls</code> when needed</p>
110+
<p><code>super-hands</code> can also be use with other types of input
111+
including 3DOF controllers, mouse, and touch. In these cases, a
112+
raycasting can be used intead of collision detection.
113+
The confugration below works with the A-Frame <code>raycaster</code>
114+
component.
126115
<pre>
127116
super-hands="colliderEvent: raycaster-intersection;
128117
colliderEventProperty: els;
129118
colliderEndEvent: raycaster-intersection-cleared;
130119
colliderEndEventProperty: el"</pre>
131120
<p>This scene also shows the fallback movement that occurs when physics
132-
is not available, which moves entities but does not rotation them.
133-
The laser and gaze controls work even better with
134-
<code>aframe-physics-system</code>.</p>
135-
<a id="events" class="example" href="events/">
136-
Integration with Global Event Handlers
137-
<br />
138-
<img class="preview" src="./assets/events.jpg"/>
139-
<div class="bonus"></div>
140-
</a>
141-
<p><ul>
142-
<li>onmousedown changes the box color</li>
143-
<li>ondragstart the controller/cursor picks up the box's color</li>
144-
<li>ondragenter the torus knot turns transparent</li>
145-
<li>ondrop the torus knot takes on the current color of the box</li>
146-
<li>onmousedown the torus knot changes to wireframe</li>
147-
</ul></p>
148-
<p>Another option for customizing reactions is by using the
149-
Global Event Handlers Web API (e.g., 'onclick').
150-
super-hands will trigger standard events that are analogous to the VR
151-
interactions taking place, like mousedown, click, dragenter, et c.
152-
Just like in standard HTML, setting the
153-
related 'on' property for an entity will register the event listener, so
154-
simple reactions can be defined inline.
155-
</p>
156-
<a id="portals" class="example" href="portals.html">Link Portals
157-
<br />
158-
<img class="preview" src="./assets/portals.jpg"/>
159-
</a>
160-
<p>A-Frame 0.6.0 added the ability to traverse experiences without
161-
leaving VR with the <code>link</code> component and <code>a-link</code>
162-
primitive. Just make sure your colliders are configured to find the link
163-
entities and you'll be able to activate the portals with
164-
<code>super-hands</code> automatically (because
165-
both use the <code>'click'</code> <code>MouseEvent</code> by default).
166-
</p>
167-
<p>You can make the experience even better by activating the
168-
<code>highlighted</code> property of the link when a hand is hovering
169-
in it. There are a few way to accomplish this:</p>
170-
<ul>
171-
<li>With the <code>hoverable</code> reaction component
172-
and a <code>-hovered</code> mixin.
173-
</li>
174-
<li>With kframe's <code>event-set</code>
175-
listening for <code>'mouseover'</code> and
176-
<code>'mouseout'</code>.
177-
</li>
178-
<li>With <code>onmouseover</code> and <code>onmouseout</code>
179-
Global Event Handlers on each link entity.
180-
</li>
181-
</ul>
182-
<p>Each of these methods is demonstrated in the portals
183-
example source</p>
184-
185-
<h2>Additional 6-DOF functionality</h2>
186-
<p>These examples showcase additional functionality of
187-
<code>super-hands</code> that takes advantage of the full capabilities
188-
of top-of-the-line VR setups</p>
189-
<a id="locomotion" class="example" href="locomotion/">Grab-based locomotion
190-
<br />
191-
<img class="preview" src="./assets/locomotion.jpg"/>
192-
<div class="bonus"></div>
193-
</a>
194-
<p>Example of the <code>a-locomotor</code> primitive to add easy
195-
locomotion to a scene with 6-DOF controllers (Vive/Oculus Touch)</p>
196-
<ul>
197-
<li>Grab the air and drag the scene around you to move</li>
198-
<li>Stretch with two hands to scale the scene up or down</li>
199-
</ul>
121+
is not available.</p>
200122
<a id="sticky" class="example" href="sticky/">Sticky Grab via
201123
Custom Button Mapping<br />
202124
<img class="preview" src="./assets/sticky.jpg"/>
@@ -207,7 +129,6 @@ <h2>Additional 6-DOF functionality</h2>
207129
<li>Knock some balls around</li>
208130
<li>Press trackpad to drop the bat</li>
209131
<li>Stretch the balls by pressing both trackpads</li>
210-
<li>Use grip to locomote around the scene</li>
211132
</ul>
212133
<!-- GitHub Corner. -->
213134
<a href="https://github.com/wmurphyrd/aframe-super-hands-component" class="github-corner">

‎examples/locomotion/a-painter-loader-component.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/locomotion/aframe-sun-sky.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/locomotion/demo-recording.json‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/locomotion/index.html‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

0 commit comments

Comments
 (0)