Using superhands component in a-frame, is it possible to rotate grabbed objects without using physics?

Question

I am using the updated super-hands component in a-frame. I have replicated the basic example from the docs (see below).

<head>
  <title>Most Basic Super-Hands Example</title>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/super-hands.min.js"></script>
</head>

<body>
  <a-scene>
    <a-assets></a-assets>
    <a-entity>
      <a-camera></a-camera>
      <a-entity sphere-collider="objects: a-box" super-hands hand-controls="left"></a-entity>
      <a-entity sphere-collider="objects: a-box" super-hands hand-controls="right"></a-entity>
    </a-entity>
    <!-- hover & drag-drop won't have any obvious effect without some additional event handlers or components. See the examples page for more -->
    <a-box hoverable grabbable stretchable draggable dropppable color="blue" position="0 0 -1"></a-box>
  </a-scene>
</body>

Which works well out of the box when it comes to grabbing objects and being able to affect their position, but not their rotation. I wondered if it was possible, (without using physics and adding a static body to the controller) to affect the rotation of the targeted objects?

I have been able to get the rotation working by adding the relevant mixin and phase-shift component from this example but given it seems possible to grab objects affecting their position I wondered if I could modify the basic example to change the rotation instead of the position (ideally I would be able to choose whether to affect position, rotation or both). I guess I'm imagining perhaps creating another component like rotatable or maybe a build on the grabbable component like grabbable="property: rotation" that I could add to the target objects.

I would like to know if this is possible in general as I would like to understand the component better so as to have more control. To give some context for this particular question however, I have a situation where the super-hands controllers are children of a dynamic-body and once a static-body is added, it causes problems with the behaviour of the parent dynamic-body.

Any advice appreciated as ever, if you need any more info, please let me know.

W. Murphy W. Murphy · Accepted Answer · 2018-07-27T16:42:17

If you want the rotation without physics, you'll need to implement your own version of grabbable that does the matrix math. It would go something like this:

  tick: (function () {
    const grabeeMatrix = new window.THREE.Matrix4()
    const ignoreScale = new window.THREE.Vector3()
    return function () {
      if (this.grabber) {
        grabeeMatrix.multiplyMatrices(
          this.grabber.object3D.matrixWorld,
          this.grabOffsetMatrix
        )
        grabeeMatrix.multiplyMatrices(this.parentOffsetMatrix, grabeeMatrix)
        // using decomp over direct Object3D.matrix manipulation
        // keeps in sync with other A-Frame components
        grabeeMatrix.decompose(
          this.el.object3D.position,
          this.el.object3D.quaternion,
          // let stretchable manage scale
          ignoreScale
        )
      }
    }
  })(),
  resetGrabber: function () {
    if (!this.grabber) {
      return false
    }
    this.grabber.object3D.updateMatrixWorld()
    this.el.object3D.parent.updateMatrixWorld()
    // save difference between grabber world matrix and grabee world matrix
    this.grabOffsetMatrix
      .getInverse(this.grabber.object3D.matrixWorld)
      .multiply(this.el.object3D.matrixWorld)
    // save difference between grabee world and local matrices
    this.parentOffsetMatrix.getInverse(this.el.object3D.parent.matrixWorld)
    return true
  },

Using superhands component in a-frame, is it possible to rotate grabbed objects without using physics?

1 Answers