Most Basic Super-Hands Example

### Dynamically Load Markdown Guide with Showdown.js Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/index.html This asynchronous JavaScript function fetches a Markdown file from a GitHub repository and converts it into HTML using the Showdown.js Markdown converter. The generated HTML is then injected into a DOM element with the ID 'dynamic-guide-here'. This allows for dynamic loading and display of documentation content. ```javascript (async function () { var converter = new showdown.Converter(); var response = await fetch('https://raw.githubusercontent.com/c-frame/aframe-super-hands-component/master/getting-started.md'); var md = await response.text() var html = converter.makeHtml(md); document.querySelector('#dynamic-guide-here').innerHTML = html; })() ``` -------------------------------- ### Basic A-Frame Setup with Super Hands (A-Frame v1.4.2) Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/README.md This HTML snippet demonstrates the basic setup for using the super-hands component with A-Frame version 1.4.2. It includes necessary scripts for A-Frame, aframe-extras, and super-hands, along with a simple scene containing a camera, two controllers with sphere colliders, and a box entity with various interaction components. ```html Most Basic Super-Hands Example

``` -------------------------------- ### Install Super Hands via npm Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/README.md This command demonstrates how to install the super-hands package using npm, a popular JavaScript package manager. After installation, you can require and use the component in your Node.js or browserify/webpack projects. ```bash npm install super-hands ``` -------------------------------- ### AFRAME.registerReducer for Click Counting Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/touch-test/index.html This snippet registers a new reducer named 'clickcount' with A-Frame. It initializes the state with a 'count' of 0 and defines a 'clickCounter' handler that increments the count on each action. This is a fundamental example of state management within A-Frame using reducers. ```javascript AFRAME.registerReducer('clickcount', { initialState: { count: 0 }, handlers: { clickCounter: (s) => { s.count++; return s; } } }); ``` -------------------------------- ### Basic A-Frame Setup with Super Hands (A-Frame v1.6.0+) Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/README.md This HTML snippet shows how to set up super-hands with A-Frame versions 1.5.0 and later. It includes a workaround to delete the native 'grabbable' component in A-Frame to avoid conflicts with super-hands' grabbable component. It loads A-Frame, aframe-extras, and super-hands, and configures a basic scene with interactive elements. ```html Most Basic Super-Hands Example

``` -------------------------------- ### Integrate Super Hands with A-Frame Scene Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This example combines draggable and droppable components within an A-Frame scene. It includes a draggable cube and a droppable box that acts as a color randomizer, demonstrating a complete drag-and-drop interaction flow. ```html

``` -------------------------------- ### Configure Super Hands for Raycaster Interaction Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/index.html This configuration snippet shows how to set up the 'super-hands' component to work with A-Frame's 'raycaster' component for input. It defines which events and properties to use for detecting raycaster intersections and when those intersections are cleared. This is useful for non-physics-based interactions or when physics is not available. ```javascript super-hands="colliderEvent: raycaster-intersection; colliderEventProperty: els; colliderEndEvent: raycaster-intersection-cleared; colliderEndEventProperty: clearedEls" ``` -------------------------------- ### Enable Physics System in A-Frame Scene Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/getting-started.md Applies the physics component to the A-Frame scene to enable physics simulations. The 'gravity' property can be optionally set, for example, to '0' for debugging purposes. ```html ``` -------------------------------- ### Register Custom A-Frame Component for Color Randomization Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/index.html This JavaScript code snippet defines a custom A-Frame component named 'color-randomizer'. It listens for the 'drag-drop' event on an entity and, upon a successful drop, assigns a random color to the dropped entity's material. It also prevents the default event behavior to notify super-hands that the gesture was accepted. This component requires the super-hands component to be present. ```javascript AFRAME.registerComponent('color-randomizer', { play: function() { this.el.addEventListener('drag-drop', function(evt) { evt.detail.dropped.setAttribute('material', 'color', '#'+(Math.random()*0xFFFFFF<<0).toString(16)) // notify super-hands that the gesture was accepted evt.preventDefault() }) } }) ``` -------------------------------- ### A-Frame VR Scene with Physics and Super Hands Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This HTML file sets up a complete VR scene using A-Frame. It includes necessary libraries for A-Frame, A-Frame Extras, Super Hands, and physics simulation. Custom components for color randomization and phase shifting are also defined. ```html Super Hands Physics VR Scene

``` -------------------------------- ### Implement Custom Hover Handling with JavaScript Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt Demonstrates how to create a custom A-Frame component to handle 'hover-start' and 'hover-end' events emitted by the 'hoverable' component. This allows for dynamic visual changes based on hover state. ```javascript AFRAME.registerComponent('hover-feedback', { init: function() { this.el.addEventListener('hover-start', (evt) => { console.log('Hovered by:', evt.detail.hand); this.el.setAttribute('material', 'emissive', '#333'); }); this.el.addEventListener('hover-end', (evt) => { console.log('Unhovered by:', evt.detail.hand); this.el.setAttribute('material', 'emissive', '#000'); }); } }); // Example usage: // ``` -------------------------------- ### Handle Click Events with A-Frame JavaScript Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This JavaScript code defines a custom A-Frame component 'click-handler' that listens for 'grab-start' and 'grab-end' events. On 'grab-start', it logs a message and changes the entity's color to yellow. On 'grab-end', it logs another message and reverts the color to green, providing clear click feedback. ```javascript AFRAME.registerComponent('click-handler', { init: function() { this.el.addEventListener('grab-start', () => { console.log('Button clicked!'); this.el.setAttribute('color', 'yellow'); }); this.el.addEventListener('grab-end', () => { console.log('Button released!'); this.el.setAttribute('color', 'green'); }); } }); ``` -------------------------------- ### Log Grab Events with A-Frame JavaScript Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This JavaScript code defines a custom A-Frame component 'grab-logger' that listens for 'grab-start' and 'grab-end' events on an entity. It logs details about the hand and button event during grabbing and the hand releasing the object. This is useful for debugging or implementing custom grab interactions. ```javascript AFRAME.registerComponent('grab-logger', { init: function() { this.el.addEventListener('grab-start', (evt) => { console.log('Grabbed by:', evt.detail.hand); console.log('Button event:', evt.detail.buttonEvent); }); this.el.addEventListener('grab-end', (evt) => { console.log('Released by:', evt.detail.hand); }); } }); ``` -------------------------------- ### Log Stretch Events with A-Frame JavaScript Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This JavaScript code defines a custom A-Frame component 'stretch-logger' that listens for 'stretch-start' and 'stretch-end' events. On 'stretch-start', it logs the hands involved in the stretching action. On 'stretch-end', it logs the final scale of the entity, useful for tracking scaling operations. ```javascript AFRAME.registerComponent('stretch-logger', { init: function() { this.el.addEventListener('stretch-start', (evt) => { console.log('Stretch started with hands:', evt.detail.hand, evt.detail.secondHand); }); this.el.addEventListener('stretch-end', (evt) => { console.log('Stretch ended, final scale:', this.el.getAttribute('scale')); }); } }); ``` -------------------------------- ### Handle Drag Events with JavaScript Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This JavaScript code demonstrates how to listen for 'drag-start' and 'drag-end' events emitted by the 'draggable' component. It logs messages to the console and modifies the material's wireframe property to provide visual feedback during dragging. ```javascript AFRAME.registerComponent('drag-feedback', { init: function() { this.el.addEventListener('drag-start', (evt) => { console.log('Started dragging'); this.el.setAttribute('material', 'wireframe', true); }); this.el.addEventListener('drag-end', (evt) => { console.log('Stopped dragging'); this.el.setAttribute('material', 'wireframe', false); }); } }); ``` -------------------------------- ### Implement Custom Drop Logic with JavaScript Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This JavaScript component, 'color-randomizer', listens for the 'drag-drop' event. Upon a successful drop, it assigns a random color to the dropped entity's material. This showcases how to react to drop events and modify dropped entities. ```javascript AFRAME.registerComponent('color-randomizer', { init: function() { this.el.addEventListener('drag-drop', (evt) => { const randomColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16); evt.detail.dropped.setAttribute('material', 'color', randomColor); }); } }); ``` -------------------------------- ### Grabbable Component Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/README.md Makes an entity move along with the controller's movement and rotation while it is grabbed. Supports up-close grabbing and pointing at a distance. Works best with a-frame-physics-system. ```APIDOC ## Grabbable Component ### Description Makes an entity move along with the controller's movement and rotation while it is grabbed. Supports up-close grabbing (6DOF controllers) and pointing at a distance (3DOF controllers). Works best with a-frame-physics-system. ### Method N/A (This is a component) ### Endpoint N/A (This is a component) ### Parameters #### Component Schema - **startButtons** (array) - Optional - Which button events to accept to start grab. Defaults to `[]`. - **endButtons** (array) - Optional - Which button events to accept to end grab. Defaults to `[]`. - **usePhysics** (string) - Optional - Whether to use physics system constraints to handle movement. Options: 'ifavailable', 'only', or 'never'. Defaults to 'ifavailable'. - **maxGrabbers** (number) - Optional - Limit number of hands that can grab entity simultaneously. Defaults to NaN (no limit). - **invert** (boolean) - Optional - Reverse direction of entity movement compared to grabbing hand. Defaults to false. - **suppressY** (boolean) - Optional - Allow movement only in the horizontal plane. Defaults to false. ### Request Example N/A (This is a component) ### Response #### States - **grabbed** (string) - Added to entity while it is being carried. ``` -------------------------------- ### Configure super-hands Component for Physics Interaction Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt Integrates 'super-hands' with A-Frame physics for physics-based interactions. It uses 'physics-collider' and custom collision events to manage interactions. ```html

``` -------------------------------- ### Configure super-hands Component for 6DOF Controllers Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt Sets up the core 'super-hands' component for 6DOF tracked controllers using sphere colliders. It enables interaction with entities marked with the 'interactive' class. ```html

``` -------------------------------- ### Apply hoverable Component for Visual Feedback Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt Applies the 'hoverable' component to an entity to indicate when a controller is within interaction range. This is useful for providing visual cues to the user. ```html

``` -------------------------------- ### Make Entity Grabbable with A-Frame Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt The 'grabbable' component makes an A-Frame entity movable and rotatable with VR controllers. It supports both close-up grabbing and distant pointing, and can integrate with physics systems like 'aframe-physics-system' for physics-based movement. Configuration options include 'maxGrabbers', 'usePhysics', 'invert', and 'suppressY'. ```html

``` -------------------------------- ### Stretchable Component Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/README.md Makes an entity rescale while grabbed by both controllers as they are moved closer together or further apart. ```APIDOC ## Stretchable Component ### Description Makes an entity rescale while grabbed by both controllers as they are moved closer together or further apart. ### Method N/A (This is a component) ### Endpoint N/A (This is a component) ### Parameters #### Component Schema - **startButtons** (array) - Optional - Which button events to accept to start stretch. Defaults to `[]`. - **endButtons** (array) - Optional - Which button events to accept to end stretch. Defaults to `[]`. - **usePhysics** (string) - Optional - Whether to update physics body shapes with scale changes. Options: 'ifavailable' or 'never'. Defaults to 'ifavailable'. - **invert** (boolean) - Optional - Reverse the direction of scaling in relation to controller movement. Defaults to false. - **phyicsUpdateRate** (number) - Optional - Milliseconds between each update to the physics bodies of a stretched entity. Defaults to 100. ### Request Example N/A (This is a component) ### Response #### States - **stretched** (string) - Added to entity while it is grabbed with two hands. ``` -------------------------------- ### Define A-Frame Interaction Mixins Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/getting-started.md Sets up reusable A-Frame mixins for defining object interactions. Includes mixins for general interactions, grab-and-move functionality, and physics-based hand controls. ```html

``` -------------------------------- ### Clickable Component Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/README.md An alternative version of `grabbable` that registers that a button was pressed, but does not move the entity. Do not use `clickable` and `grabbable` on the same entity. ```APIDOC ## Clickable Component ### Description An alternative version of `grabbable` that registers that a button was pressed, but does not move the entity. Do not use `clickable` and `grabbable` on the same entity (just use `grabbable` and watch the "grabbed" state instead of "clicked"). ### Method N/A (This is a component) ### Endpoint N/A (This is a component) ### Parameters #### Component Schema - **startButtons** (array) - Optional - Which button events to accept to start grab. Defaults to `[]`. - **endButtons** (array) - Optional - Which button events to accept to end grab. Defaults to `[]`. ### Request Example N/A (This is a component) ### Response #### States - **clicked** (string) - Added to entity while a button is held down. ``` -------------------------------- ### Configure super-hands Component for 3DOF Controllers Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt Configures the 'super-hands' component for 3DOF controllers using raycasting. It specifies events for intersection detection and clearing, enabling interaction with 'interactive' entities. ```html

``` -------------------------------- ### Apply Advanced Drag-Drop Effects with HTML Handlers Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This HTML snippet utilizes the previously defined JavaScript functions ('paintBall', 'unPaintBall') with global event handlers for drag-and-drop. It demonstrates a 'paint ball' effect where dragging an object applies its color to a target sphere. ```html ``` -------------------------------- ### Advanced Drag-Drop with JavaScript Functions Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt This JavaScript defines functions 'paintBall' and 'unPaintBall' to handle advanced drag-and-drop effects. These functions are triggered by global event handlers like 'ondragstart' and 'ondragend', allowing for complex visual feedback and interactions. ```javascript function paintBall(evt) { var color = evt.target.getAttribute('color'); var target = evt.relatedTarget.querySelector('a-sphere'); target.setAttribute('color', color); target.setAttribute('visible', true); } function unPaintBall(evt) { evt.relatedTarget.querySelector('a-sphere').setAttribute('visible', false); } ``` -------------------------------- ### Use Global Event Handlers for A-Frame Interactivity Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt Super-hands allows direct use of standard HTML mouse events within A-Frame attributes, simplifying interactivity without custom JavaScript. This enables actions like changing color on click or scale on hover directly in the HTML markup. ```html

``` -------------------------------- ### Make Entity Stretchable with A-Frame Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt The 'stretchable' component enables two-handed scaling of A-Frame entities. By grabbing with both controllers and moving them apart or together, the entity's size changes. It supports physics body shape updates and offers options like 'invert' for scaling direction and 'physicsUpdateRate'. ```html

``` -------------------------------- ### Include Libraries for Super Hands Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/getting-started.md Adds essential JavaScript libraries for super-hands, physics, and event handling to an A-Frame project. These scripts should be included in the HTML head or before the closing body tag. ```html ``` -------------------------------- ### Apply Interaction Mixin to Grabbable A-Frame Objects Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/getting-started.md Assigns the 'all-interactions' mixin to an A-Frame entity representing a cube. This makes the object grabbable, stretchable, and hoverable, allowing it to be picked up and manipulated by the VR controllers. ```html ``` -------------------------------- ### Forward Mouse and Touch Events (A-Frame Component) Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/physics/index-mouse.html The 'capture-mouse' A-Frame component forwards mouse and touch events from the canvas to the super-hands entity. It initializes by attaching event listeners to the canvas for 'mousedown', 'mouseup', 'touchstart', 'touchmove', and 'touchend'. It prevents default touchmove behavior to avoid conflicts with look controls and emits the events using 'this.el.emit'. ```javascript AFRAME.registerComponent('capture-mouse', { init: function () { this.eventRepeater = this.eventRepeater.bind(this) this.el.sceneEl.addEventListener('loaded', () => { this.el.sceneEl.canvas.addEventListener('mousedown', this.eventRepeater) this.el.sceneEl.canvas.addEventListener('mouseup', this.eventRepeater) this.el.sceneEl.canvas.addEventListener('touchstart', this.eventRepeater) this.el.sceneEl.canvas.addEventListener('touchmove', this.eventRepeater) this.el.sceneEl.canvas.addEventListener('touchend', this.eventRepeater) }, {once: true}) }, eventRepeater: function (evt) { if (evt.type.startsWith('touch')) { evt.preventDefault() // avoid repeating touchmove because it interferes with look-controls if (evt.type === 'touchmove') { return } } this.el.emit(evt.type, evt.detail) } }) ``` -------------------------------- ### Require Super Hands in JavaScript Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/README.md This JavaScript snippet shows how to import and register the A-Frame and super-hands components in a project managed with a module bundler like Webpack or Browserify. This makes the super-hands functionality available within your A-Frame scene. ```javascript require('aframe'); require('super-hands'); ``` -------------------------------- ### Make Entity Clickable with A-Frame Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt The 'clickable' component allows an A-Frame entity to register button presses without moving. It adds a 'clicked' state while buttons are held and provides visual feedback through event sets. This component should not be used on the same entity as 'grabbable'. ```html ``` -------------------------------- ### Create Drop Targets with Super Hands Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt The 'droppable' component designates an entity as a target for dragged entities. It can filter which entities are accepted and emit custom events upon acceptance or rejection. This is crucial for defining areas where items can be dropped. ```html

``` -------------------------------- ### Add Static Body to A-Frame Ground for Stability Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/getting-started.md Applies the 'static-body' component to an A-Frame box entity to create a non-moving ground surface. This prevents objects from falling through the floor. It can also be added to existing ground elements or any surface intended to support movable objects. ```html ``` -------------------------------- ### Make Entity Draggable with Super Hands Source: https://context7.com/c-frame/aframe-super-hands-component/llms.txt The 'draggable' component allows an entity to participate in drag-and-drop gestures. It does not handle movement itself; it should be combined with the 'grabbable' component for movement. This component is essential for creating interactive drag-and-drop experiences in A-Frame. ```html

``` -------------------------------- ### Apply Physics Hands Mixin to A-Frame Hand Entities Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/getting-started.md Assigns the 'physics-hands' mixin to A-Frame entity elements representing the right and left hands. This enables them to interact with physics objects using the super-hands component. ```html ``` -------------------------------- ### Control Physics Presence with Grip Events in A-Frame Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/physics/index.html The 'phase-shift' component enables or disables physics collision forces on a controller based on grip button presses. It listens for 'gripdown' to enable forces and 'gripup' to disable them. This component modifies the 'collision-filter' attribute. ```javascript AFRAME.registerComponent('phase-shift', { init: function () { var el = this.el el.addEventListener('gripdown', function () { el.setAttribute('collision-filter', {collisionForces: true}) }) el.addEventListener('gripup', function () { el.setAttribute('collision-filter', {collisionForces: false}) }) } }) ``` -------------------------------- ### Register Custom Phase Shift Component for A-Frame Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/getting-started.md Registers a custom A-Frame component named 'phase-shift'. This component modifies the collision filter's 'collisionForces' property when the controller's grip button is pressed or released, preventing objects from being knocked away before grabbing. ```javascript AFRAME.registerComponent('phase-shift', { init: function () { var el = this.el el.addEventListener('gripdown', function () { el.setAttribute('collision-filter', {collisionForces: true}) }) el.addEventListener('gripup', function () { el.setAttribute('collision-filter', {collisionForces: false}) }) } }); ``` -------------------------------- ### A-Frame Super Hands Component: Color Randomization and Painting Functions (JavaScript) Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/events/index.html This snippet includes JavaScript functions for the A-Frame Super Hands Component. 'randomizeColor' sets a random color to a target entity. 'paintBall' applies a color from an event to a related sphere and makes it visible. 'unPaintBall' hides the related sphere. ```javascript function randomizeColor (target) { target.setAttribute('color','#'+Math.random().toString(16).substr(-6)); } function paintBall (evt) { var col = evt.target.getAttribute('color'); var target = evt.relatedTarget.querySelector('a-sphere'); target.setAttribute('color', col); target.setAttribute('visible', true); } function unPaintBall (evt) { evt.relatedTarget.querySelector('a-sphere') .setAttribute('visible', false); } ``` -------------------------------- ### Randomize Material Color on Collision (A-Frame Component) Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/physics/index-ammo-keys.html Registers a custom A-Frame component 'color-randomizer' that changes the material color of a collided object to a random hex color. This component listens for the 'collidestart' event. It's a client-side script. ```javascript AFRAME.registerComponent('color-randomizer', { play: function () { this.el.addEventListener('collidestart', function (evt) { evt.detail.targetEl.setAttribute('material', 'color', '#' + (Math.random() * 0xFFFFFF << 0).toString(16)) }) } }) ``` -------------------------------- ### Randomize Color on Drag-Drop in A-Frame Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/physics/index.html This component, 'color-randomizer', attaches an event listener to the 'drag-drop' event. When an object is dropped, its material color is randomized. It requires the A-Frame framework. ```javascript AFRAME.registerComponent('color-randomizer', { play: function () { this.el.addEventListener('drag-drop', function (evt) { evt.detail.dropped.setAttribute('material', 'color', '#'+(Math.random()*0xFFFFFF<<0).toString(16)) }) } }) ``` -------------------------------- ### Toggle Physics Collision on Button Press (A-Frame Component) Source: https://github.com/c-frame/aframe-super-hands-component/blob/master/examples/physics/index-ammo-keys.html Registers a custom A-Frame component 'phase-shift' that controls the physics collision state of an entity. It disables collision when 'gripup' is detected and enables it on 'gripdown'. This component requires the 'ammo-body' component to be present. ```javascript AFRAME.registerComponent('phase-shift', { init: function () { var el = this.el el.addEventListener('gripdown', function () { el.setAttribute('ammo-body', { disableCollision: false }) }) el.addEventListener('gripup', function () { el.setAttribute('ammo-body', { disableCollision: true }) }) } }) ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.