From 0bd3f5cae0abf32a297f9d0c7887810fc56674d2 Mon Sep 17 00:00:00 2001
From: ehammons11 <70654503+ehammons11@users.noreply.github.com>
Date: Sun, 14 Jan 2024 10:19:51 -0600
Subject: [PATCH] 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 |  1 +
 src/components/hand-tracking-controls.js  | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/components/hand-tracking-controls.md b/docs/components/hand-tracking-controls.md
index 7937e4701fc..d5703ad251a 100644
--- a/docs/components/hand-tracking-controls.md
+++ b/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
diff --git a/src/components/hand-tracking-controls.js b/src/components/hand-tracking-controls.js
index fb89e9af1be..e41e29d7434 100644
--- a/src/components/hand-tracking-controls.js
+++ b/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);           
     }
   },