aframe-responsive-component
v0.1.4
Published
Brings responsive design based on the user's controller.
Downloads
9
Maintainers
pardolabReadme
aframe-responsive-component
Brings responsive design based on the user's controller. Dynamically sets attributes (or components) to entities based on the current connected controller.
For A-Frame.
This is akin to media queries, but with the controllers. This component listens to controller connection, and sets a property according to the supported type of controller (Oculus Touch, Vive, Daydream, Mixed Reality, Gaze).
This means that you can tailor specific experiences to each one of the devices without rewriting your code. From tutorials to how the world is laid out.
This works really well with super-hand-components.
Demo
You can access a realtime implementation in http://pardolab.com. Here's also a basic example.
API
| Property | Type | Description | Default Value |
| -------- | ----------- | ------------- |------------- |
| controller | Mandatory | An <a-entity> or element that holds the controller, which the component will call 'controllerconnected' and 'controllerdisconnected' properties. This can be used (and is recommended) to target progressive-controls | No default. Must be used. |
| _default | Mandatory | An Array of properties that sets the a pair of attributes and their respective values to the current component. This is the one which will work with gaze This will be the main fallback mechanism in case other controllers aren't specified. | No default. Must be used. |
|daydream | Optional | Array of properties to be set when the daydream controller is connected. | The array of properties you specified in _default |
|oculus | Optional | Array of properties to be set when the oculus-touch controller is connected. | The array of properties you specified in _default |
|vive | Optional | Array of properties to be set when the HTC Vive controller is connected. | The array of properties you specified in _default |
|gearvr | Optional | Array of properties to be set when the GearVR controller is connected. | The array of properties you specified in _default |
|windows | Optional | Array of properties to be set when a Windows Mixed Reality controller is connected. | The array of properties you specified in _default |
|[{"attr": "myComponent", "value": ["myComponent's Value"]}] | Mandatory | This is the key-value pair of each of the properties specified above. Important! Each key-value pair must be enclosed in double quotes or it won't work. Don't use semicolon ; inside "value"; have them in separate strings instead!| No defaults. Must be used |
How to use:
This works by passing a JSON Array to the component, parsing it, and then listening for each controllerconnected and controllerdisconnected events, and setting it for the right controller. You must pass it with the form of:
<a-entity responsive='controller:.controller ; _default:[{"attr": "myComponent", "value": ["myComponent\'s Value"]}]'></a-entity>Note:
_default was used instead of default because the latter was conflicting with A-Frame when reading the component's schema.
Installation
Browser
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<!-- super-hands; not needed, but recommended -->
<script src="https://unpkg.com/[email protected]/dist/super-hands.min.js"></script>
<!-- The component -->
<script src="https://unpkg.com/[email protected]/dist/aframe-responsive-component.min.js"></script>
</head>
<body>
<a-scene>
<!-- progressive-controls, not needed but recommended -->
<a-entity progressive-controls="objects:.obj" class="controller">
<a-entity id="rhand"
class="right-controller" collision-filter="collisionForces: false" >
</a-entity>
<a-entity id="lhand"
class="left-controller" collision-filter="collisionForces: false">
</a-entity>
</a-entity>
<!-- Where the magic happens -->
<!-- Oculus will overwrite default when an oculus touch controller is connected.
If any other controller is connected, it will use its property instead
-->
<a-entity
class="obj"
responsive='controller: .controller;
_default:[{"attr":"geometry", "value":["primitive:sphere","radius:0.2"]},
{"attr" : "position", "value":["0 1 -1"]},
{"attr" : "material", "value" : ["color:magenta"]};
oculus:[{"attr" : "geomtry", "value" : ["primitive:box", "height:0.1"]},
{"attr" : "position", "value":["0 1 -2"]},
{"attr" : "material", "value" : ["color:#00BCD4"]};
]'></a-entity>
</a-scene>
</body>
npm
Install via npm:
npm install aframe-responsive-componentThen require and use.
require('aframe');
require('aframe-responsive-component');Changelog
0.1.4
Forgot to update the URL to match the versioning in the README.
0.1.3
Thanks to @gabrieljbaker for letting us know about the problem. We fixed an issue that whenever we published the NPM package, the dist script will run, executing a webpack script, and overwriting what we had.
We also spot a bug in the example in index.html, which we've fixed.
We also now have GitHub Pages (Should've been since day zero, though 😒). Here includes the most basic and boring example. This is also reflected in the README.
0.1.2
Made some fixes to the Readme. Fixed the URL of unpkg.