Children of hand-tracking-controls entity are attached to the wrist j…

…oint. It allows parenting entities to the hand. e.g watch
aframevr · Nov 27, 2023 · 874fced · 874fced
1 parent a0722c5
commit 874fced
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/src/components/hand-tracking-controls.js b/src/components/hand-tracking-controls.js
@@ -2,6 +2,8 @@
 var registerComponent = require('../core/component').registerComponent;
 var bind = require('../utils/bind');
 
+var AEntity = require('../core/a-entity').AEntity;
+
 var trackedControlsUtils = require('../utils/tracked-controls');
 var checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;
 
@@ -84,6 +86,7 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
     }
 
     this.onModelLoaded = this.onModelLoaded.bind(this);
+    this.onChildAttached = this.onChildAttached.bind(this);
     this.jointEls = [];
     this.controllerPresent = false;
     this.isPinched = false;
@@ -102,6 +105,11 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
     this.updateReferenceSpace = this.updateReferenceSpace.bind(this);
     this.el.sceneEl.addEventListener('enter-vr', this.updateReferenceSpace);
     this.el.sceneEl.addEventListener('exit-vr', this.updateReferenceSpace);
+    this.el.addEventListener('child-attached', this.onChildAttached);
+  },
+
+  onChildAttached: function (evt) {
+    this.addChildEntity(evt.detail.el);
   },
 
   update: function () {
@@ -164,9 +172,21 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
 
       this.updateHandModel();
       this.detectGesture();
+      this.updateWristObject();
     }
   },
 
+  updateWristObject: (function () {
+    var jointPose = new THREE.Matrix4();
+    return function () {
+      var wristObject3D = this.wristObject3D;
+      if (!wristObject3D) { return; }
+      jointPose.fromArray(this.jointPoses, WRIST_INDEX * 16);
+      wristObject3D.position.setFromMatrixPosition(jointPose);
+      wristObject3D.quaternion.setFromRotationMatrix(jointPose);
+    };
+  })(),
+
   updateHandModel: function () {
     if (this.data.modelStyle === 'dots') {
       this.updateHandDotsModel();
@@ -348,6 +368,22 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
     mesh.rotation.set(0, 0, 0);
     skinnedMesh.frustumCulled = false;
     skinnedMesh.material = new THREE.MeshStandardMaterial({color: this.data.modelColor});
+    this.setupChildrenEntities();
     this.el.setObject3D('mesh', mesh);
+  },
+
+  setupChildrenEntities: function () {
+    var childrenEls = this.el.children;
+    this.wristObject3D = new THREE.Object3D();
+    for (var i = 0; i < childrenEls.length; ++i) {
+      if (!(childrenEls[i] instanceof AEntity)) { continue; }
+      this.addChildEntity(childrenEls[i]);
+    }
+    this.el.sceneEl.object3D.add(this.wristObject3D);
+  },
+
+  addChildEntity: function (childEl) {
+    if (!(childEl instanceof AEntity)) { return; }
+    this.wristObject3D.add(childEl.object3D);
   }
 });
diff --git a/tests/components/hand-tracking-controls.test.js b/tests/components/hand-tracking-controls.test.js
@@ -65,6 +65,22 @@ suite('tracked-controls-webxr', function () {
     });
   });
 
+  suite('children entities', function () {
+    test('attached to the wrist joint', function (done) {
+      var boxEl = document.createElement('a-box');
+      el.setAttribute('hand-tracking-controls', {hand: 'left'});
+      el.components['hand-tracking-controls'].checkIfControllerPresent();
+      el.addEventListener('model-loaded', function () {
+        assert.ok(el.components['hand-tracking-controls'].wristObject3D);
+        el.appendChild(boxEl);
+      });
+      el.addEventListener('child-attached', function () {
+        assert.equal(boxEl.object3D.parent, el.components['hand-tracking-controls'].wristObject3D);
+        done();
+      });
+    });
+  });
+
   suite('emit events', function () {
     test('pinchstarted', function () {
       const emitSpy = sinon.spy(el, 'emit');