Viro: How can I rotate an object on the spot?

[ascorbic]

I'm displaying a Viro3DObject inside a ViroScene, on a device without a gyroscope. I would like the user to be able to rotate the object by touching and dragging on it. Is there a way to do this? I've tried various drag types to no effect.

[manbod]

Hi @ascorbic ,
Thanks for reaching out. For implementing rotation, have a look at our open source Figment AR app (available on App Store and Play Store). Source available for download here. Although the example is in AR, the rotation related code would apply to rotatiing a Viro3DObject in ViroScene as well. The related source for handling rotation can be found here. The code achieves a two-finger rotation. There'll be 3 main steps to rotate are:

1. Set rotation as a state

      getInitialState() {
        return {
          ...
          rotation : [0, 0, 0],
          ...
       }
     }

1. Use this.state.rotation on your Viro3DObject or any other ViroNode and implement an _onRotate callback function.

  ref={this._setARNodeRef}
  rotation={this.state.rotation}
  onRotate={this._onRotate}

1. Implement your _onRotate function as below:

    _onRotate(rotateState, rotationFactor, source) {
      if (rotateState == 3) {
        this.setState({
          rotation : [this.state.rotation[0], this.state.rotation[1] + rotationFactor, this.state.rotation[2]]
        });
        return;
      }
      this.arNodeRef.setNativeProps({rotation:[this.state.rotation[0], this.state.rotation[1] + rotationFactor, this.state.rotation[2]]});
    },

In the above example I have included state changes both via setState and setNativeProps. You shouldnt need both. Use whichever way you prefer to implement it.

Hope this helps. Let us know if you run in to more issues.

Thanks

[ascorbic]

Thanks @manbod. This doesn't work well on the device I'm using. It's very hard to get it to register a rotate action. Is the a way of making this work with one finger?

[manbod]

Hi @ascorbic ,
Not sure what you mean by it's hard to register a rotate action. Can you try installing the Figment AR app on your device and see how rotate works on there (that uses the same code above)? If two finger rotate is a no go for you, you'll need to implement your own business logic to basically do the same rotation state changes but via different UX that works for your app. Something on the lines of having a button somewhere around the 3D object. And rotating the object for as long as the user presses the button. Or some other UX on those lines. But try out the rotation in Figment AR if it works on your device. You can check out the source and build it too.

[nehalTilt]

I used the same code for me also the code is not working properly @manbod
I am searching for good code to rotate my 3D object using finger. Also, I want to move the object in-plane and zoom the object using pinch