From c543d20db969aab970a1056d915003e3c4f20418 Mon Sep 17 00:00:00 2001 From: ehammons11 Date: Sun, 14 Jan 2024 09:06:50 -0600 Subject: [PATCH 1/2] Added modelOpacity to hand -Added modelOpacity to hand_tracking_controls schema -changed updateModelColor to updateModelMaterial because it now updates opacity. --- src/components/hand-tracking-controls.js | 25 +++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/hand-tracking-controls.js b/src/components/hand-tracking-controls.js index fb89e9af1be..16de41889e4 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,36 @@ 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; if (skinnedMesh) { this.skinnedMesh.material.color.set(this.data.modelColor); + + if (!(this.data.modelOpacity === 1.0)){ + this.skinnedMesh.material.transparent.set(true); + } + else{ + this.skinnedMesh.material.transparent.set(false); + } + + this.skinnedMesh.material.opacity.set(this.data.modelOpacity); } for (var i = 0; i < jointEls.length; i++) { jointEls[i].setAttribute('material', 'color', this.data.modelColor); + + if (!(this.data.modelOpacity === 1.0)){ + jointEls[i].setAttribute('material', 'transparent', true); + } + else{ + jointEls[i].setAttribute('material', 'transparent', false); + } + + jointEls[i].setAttribute('material', 'opacity', this.data.modelOpacity); } }, From 3ac75080ccee0c3885a27f51e76de647868ade93 Mon Sep 17 00:00:00 2001 From: ehammons11 Date: Sun, 14 Jan 2024 09:38:45 -0600 Subject: [PATCH 2/2] Refined updateModelMaterial -simplified the modelOpacity functionality -added documentation --- docs/components/hand-tracking-controls.md | 1 + src/components/hand-tracking-controls.js | 19 +++---------------- 2 files changed, 4 insertions(+), 16 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 16de41889e4..e41e29d7434 100644 --- a/src/components/hand-tracking-controls.js +++ b/src/components/hand-tracking-controls.js @@ -126,29 +126,16 @@ module.exports.Component = registerComponent('hand-tracking-controls', { 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); - - if (!(this.data.modelOpacity === 1.0)){ - this.skinnedMesh.material.transparent.set(true); - } - else{ - this.skinnedMesh.material.transparent.set(false); - } - + 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); - - if (!(this.data.modelOpacity === 1.0)){ - jointEls[i].setAttribute('material', 'transparent', true); - } - else{ - jointEls[i].setAttribute('material', 'transparent', false); - } - + jointEls[i].setAttribute('material', 'transparent', transparent); jointEls[i].setAttribute('material', 'opacity', this.data.modelOpacity); } },