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); } },