How to achieve SceneViewer like rotation controls based on drag?

[lokiiarora]

Hey folks,
Great work on the project 🎉🎉🎉
I wanted to achieve Sceneviewer-like rotation controls based on drag?
Here's what I have done:

1. Create an extended TransformableNode which can listen to drag gestures
2. Create a new BaseTransformationController that takes the DragGesture and transforms that into rotations on the provided node.

Here's the code I have written to achieve that:

class RotationController3D(transformableNode: BaseTransformableNode, gesture: DragGestureRecognizer):
    BaseTransformationController<DragGesture>(transformableNode, gesture) {

    var rotationPerInchX = 120.0f
    var rotationPerInchY = 20.0f
    val TAG = RotationController3D::class.java.simpleName

    private fun getDeltaRotationX(gesture: DragGesture): Float {
        val lastXY = gesture.position.toXYPair()
        val currentXY = Vector3.add(gesture.position, gesture.delta).toXYPair()
        val diffX = lastXY.first - currentXY.first
        val diffInInches = gesture.pixelsToInches(diffX)
        Log.d(TAG, "diff in inches x $diffInInches")
        val sign = sign(diffX)
        return diffInInches * rotationPerInchX * sign
    }

    private fun getDeltaRotationY(gesture: DragGesture): Float {
        val lastXY = gesture.position.toXYPair()
        val currentXY = Vector3.add(gesture.position, gesture.delta).toXYPair()
        val diffX = lastXY.second - currentXY.second
        val diffInInches = gesture.pixelsToInches(diffX)
        Log.d(TAG, "diff in inches y $diffInInches")
        val sign = sign(diffX)
        return diffInInches * rotationPerInchY * sign
    }

    override fun onContinueTransformation(gesture: DragGesture?) {
        gesture ?: return
        val rotationAmountX = getDeltaRotationX(gesture)
        val rotationAmountY = getDeltaRotationY(gesture)
        val rotationDeltaX = Quaternion(transformableNode.up, rotationAmountX)
        val rotationDeltaY = Quaternion(transformableNode.left, rotationAmountY)
        var localrotation = transformableNode.localRotation
        if (rotationAmountX < rotationAmountY) {
            localrotation = Quaternion.multiply(localrotation, rotationDeltaY)
        } else {
            localrotation = Quaternion.multiply(localrotation, rotationDeltaX)
        }
        transformableNode.localRotation = localrotation
    }

    override fun canStartTransformation(gesture: DragGesture?): Boolean {
        return transformableNode.isSelected
    }

    override fun onEndTransformation(gesture: DragGesture?) {}
}

fun Vector3.toXYPair(): Pair<Float, Float> = x to y

The desired result: https://drive.google.com/file/d/1QoXgrF7ev5RAAvdvTo3fCkPgUe393YvK/view?usp=sharing
The result: https://drive.google.com/file/d/1Qk-mPuI1Jl1a8xuterHTlBfakgMAzzB0/view?usp=sharing

Any inputs on how I can achieve a desired effect would be helpful?

[ThomasGorisse]

Hi,

Nice try !!!
But in fact, in a non AR context, you have to view things differently.
You have to leave your tiger/bottle alone (in same place) and turn (move the camera) around it.
Have a look at the Filament ModelViewer for this: https://github.com/google/filament/blob/main/android/filament-utils-android/src/main/java/com/google/android/filament/utils/ModelViewer.kt

[lokiiarora]

Alright, will check it out !
Would it be something that the community would want to include in the SceneView ?

[ThomasGorisse]

Yes. It would be awesome if you could integrate it in SceneView.
Specially the new Filament pick API. Even if it's not about Camera mouvements, it can tell which model was touch.