Added modelOpacity to hand (#5431)

* Added modelOpacity to hand

-Added modelOpacity to hand_tracking_controls schema
-changed updateModelColor to updateModelMaterial because it now updates opacity.

* Refined updateModelMaterial

-simplified the modelOpacity functionality
-added documentation

docs/components/hand-tracking-controls.md

@@ -24,6 +24,7 @@ Use `hand-tracking-controls` to integrate [hand tracked input][webxrhandinput] i
 |----------------|----------------------------------------------------------------------------------------|---------------|
 | hand                 | The hand that will be tracked (i.e., right, left). | left                 |
 | modelColor          | Color of hand material.                                                                | white         |
+| modelOpacity         | Opacity of the hand material.                                   | 1.0          |
 | modelStyle           | Mesh representing the hand or dots matching the joints        | mesh
 
 ## Events

src/components/hand-tracking-controls.js

@@ -53,7 +53,8 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
   schema: {
     hand: {default: 'right', oneOf: ['left', 'right']},
     modelStyle: {default: 'mesh', oneOf: ['dots', 'mesh']},
-    modelColor: {default: 'white'}
+    modelColor: {default: 'white'},
+    modelOpacity: {default: 1.0}
   },
 
   bindMethods: function () {
@@ -119,18 +120,23 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
   },
 
   update: function () {
-    this.updateModelColor();
+    this.updateModelMaterial();
   },
 
-  updateModelColor: function () {
+  updateModelMaterial: function () {
     var jointEls = this.jointEls;
     var skinnedMesh = this.skinnedMesh;
+    var transparent = !(this.data.modelOpacity === 1.0);
     if (skinnedMesh) {
       this.skinnedMesh.material.color.set(this.data.modelColor);
+      this.skinnedMesh.material.transparent.set(transparent);
+      this.skinnedMesh.material.opacity.set(this.data.modelOpacity);
     }
 
     for (var i = 0; i < jointEls.length; i++) {
       jointEls[i].setAttribute('material', 'color', this.data.modelColor);
+      jointEls[i].setAttribute('material', 'transparent', transparent);     
+      jointEls[i].setAttribute('material', 'opacity', this.data.modelOpacity);           
     }
   },