mesh-ui

VR-focused 3D UI

Usage

In a three.js scene.

<script src="dist/mesh-ui.bundle.js"></script>

<script>

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() );

</script>

Aframe

Or can use the Aframe component.

<script src="dist/aframe-mesh-ui.bundle.js"></script>

<a-scene>

  <a-entity id="progress-radial" progress="type: radial; values: 0.1 0.5 0.1; width: 1.3; thickness: 0.1; lit: true" position="0.75 2.2 0"></a-entity>

</a-scene>

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

pr.setAttribute('progress', 'values', '0.1 0.2 0.3');
</script>

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°)