Aframe-responsive-component NPM

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/super-hands@2.1.0/dist/super-hands.min.js"></script>
  <!-- The component -->
  <script src="https://unpkg.com/aframe-responsive-component@0.1.4/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-component

Then 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.

aframe aframe-component aframe-vr vr mozvr webvr responsive

@types/three babel-core babel-preset-env pump typescript

@everything-registry/sub-chunk-1104 @zalastax/nolb-afr

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago