https://github.com/mkeblx/mesh-ui

3D UI components for VR
https://github.com/mkeblx/mesh-ui

Last synced: about 2 months ago
JSON representation

3D UI components for VR

• Host: GitHub
• URL: https://github.com/mkeblx/mesh-ui
• Owner: mkeblx
• Created: 2016-05-31T19:13:41.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-18T03:50:49.000Z (over 7 years ago)
• Last Synced: 2024-10-06T01:46:34.965Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.55 MB
• Stars: 12
• Watchers: 3
• Forks: 4
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
mesh-ui

=======

VR-focused 3D UI

### Usage

In a three.js scene.

```javascript

var progressRadial = new MV.Progress( {

    type: 'radial',

    width: 1,

    thickness: 0.05,

    rounded: true,

    lit: true,

    gradient: false,

    arc: Math.PI*2,

    segments: 42,

    radialSegments: 8

  } );

var colors = [ '#9c27b0', '#2196f3', '#e91e63' ];

var values = [ 0.1, 0.2, 0.3 ];

progressRadial.setColors( colors );

progressRadial.setValues( values );

scene.add( progressRadial.getObject() );

```

#### Aframe

Or can use the Aframe component.

```html

  

var pr = document.getElementById('progress-radial');

pr.setAttribute('progress', 'values', '0.1 0.2 0.3');

```

### Properties

| Name | Value | Default |

| ---- | ----- | ------- |

| type | One of 'bar', 'radial' or for 2D versions 'bar-2d', 'radial-2d' | 'bar' |

| bgColor | Background color of mesh, visible when a value doesn't cover | |

| colors | Array of colors for segments: segment i with value=values[i] uses colors[i] | ['#9c27b0','#2196f3','#e91e63','#00bcd4'] |

| values | Array of values for segments, sum <= 1 | [0] |

| bg | draw the background color. If false, background transparent | true |

| width | Width of progress element (outer width) | 1 |

| thickness | Thickness dimension | 0.1 |

| lit | use lighting for material | false |

| rounded | use rounded endcaps for geometry | true |

| gradient | draw gradient using all colors; will use only first value | false |

| segments | number of geometry segments | 16 for bar, 52 for radial |

| arc | for radial type, arc angle | 2*pi radians (360°) |