Native A-Frame support

[mflux]

We could support A-Frame for even more users, especially users who are just dabbling in 3D/VR without much JS knowledge. How it could work:

<a-entity id="myLight" light="color: #AFA; intensity: 1.5" position="-1 1 0"></a-entity>

<a-datgui name="light settings" target="#myLight">
    <a-gui-dropdown property="light.color">
        <option value="#ff0000">Red</option>
        <option value="#0000ff">Blue</option>
    </a-gui-dropdown>
    <a-gui-checkbox property="light.castShadow"></a-gui-checkbox>
    <a-gui-slider property="light.intensity"></a-gui-slider>
</a-datgui>    

<a-datgui> defines a dat gui vr primitive. Name attribute sets the name of the dat gui group. Target sets the element id for the object being manipulated.

The children of this element are controllers. The type probably has to be explicit:

<a-gui-slider> creates a slider. "Property" attributes set what the controller modifies, in this case "light.intensity" refer to myLight's light component, intensity property.

[mflux]

Users can always escape hatch it via

<script>
    const guiElement = document.querySelector('#datgui');
    const gui = guiElement.gui;

    gui.add( ... );
</script>

[customlogic]

Didn't you get this working for the Perfume demo?

[donmccurdy]

Is there a branch or repo for this / is an A-Frame wrapper still being worked on?

[mflux]

We decided to have separately maintain the DatGUIVR AFrame component. You can now find it here:

https://github.com/mflux/aframe-datguivr

Don't have a runnable example yet. Let me know if you build one!