The forum on this site is closed for new comments and posts. Continue the conversation in our Snap AR Discord server.

Rotate on swipe

Follow
Avatar
Intellify Developer1
Snap Lens Network Member Lens Studio Team

Hello all i am new for javascript and lens studio , i need to know is there any way to rotate 3D object with finger swipe ? both side up-down and left-right .

 

right now i am doing this automatic 

 

var transform = script.getTransform();

var event = script.createEvent("LateUpdateEvent");

 

 

event.bind(function (eventData)

{

var transform = script.getTransform();

var rotation = transform.getLocalRotation();

var rotateBy = quat.angleAxis(0.02, vec3.up());

rotation = rotation.multiply(rotateBy);

transform.setLocalRotation(rotation);

 

});

 

 

but how to do using swipe ? 

0
  • Avatar
    Intellify Developer1
    Snap Lens Network Member Lens Studio Team

    i had achieve this functionality with help of this code , but still buggy behaviour. 


    var isDragStart = false;
    var touchStartPos;
    var transform = script.getTransform();
    var minimumDrag = 0.05;

    var touchStart = script.createEvent("TouchStartEvent");
    touchStart.bind(OnTouchStart);

    var drag = script.createEvent("TouchMoveEvent");
    drag.bind(StartRotation);

    var event = script.createEvent("TouchEndEvent");
    event.bind(function(eventData) {

    touchStartPos = null;

    });


    function OnTouchStart(eventData) {
    touchStartPos = eventData.getTouchPosition();
    }

    function StartRotation(eventData) {

    if (touchStartPos) {


    var currentPos = eventData.getTouchPosition();
    var posChange = new vec2(currentPos.x - touchStartPos.x, currentPos.y - touchStartPos.y);


    // print(Math.abs(posChange.x) +" "+Math.abs(posChange.y));

    var rotation = transform.getLocalRotation();


    if (Math.abs(posChange.y) > minimumDrag) {

    if (posChange.y > 0.1) {
    print("Down");
    var rotateBy = quat.angleAxis(Math.PI * getDeltaTime() / 5, vec3.right());
    } else {
    print("Up");
    var rotateBy = quat.angleAxis(Math.PI * getDeltaTime() / 5, vec3.left());
    }
    rotation = rotation.multiply(rotateBy);
    transform.setLocalRotation(rotation);

    } else if (Math.abs(posChange.x) > minimumDrag) {
    if (posChange.x > 0.1) {
    print("right");
    var rotateBy = quat.angleAxis(Math.PI * getDeltaTime() / 5, vec3.up());
    } else {
    print("left");
    var rotateBy = quat.angleAxis(Math.PI * getDeltaTime() / 5, vec3.down());
    }
    rotation = rotation.multiply(rotateBy);
    transform.setLocalRotation(rotation);

    }

     

     

    }

    }

    Comment actions Permalink
  • Avatar
    Olha
    Snap Lens Network Member Lens Studio Team

    Hi, Intellify Developer1 !

    Please try out this script: 

    var curPos = undefined;

    var transform = script.getSceneObject().getTransform();

    var speed = 10.0;

    script.createEvent("TouchStartEvent").bind(function (eventData) {

        curPos = eventData.getTouchPosition();

    });

    script.createEvent("TouchMoveEvent").bind(function (eventData) {

        if(!curPos)

            return;

        var nextPos = eventData.getTouchPosition();

        var deltaX = nextPos.x - curPos.x;

        var deltaY = nextPos.y - curPos.y;


        var mat = transform.getInvertedWorldTransform();

        var axisX = mat.multiplyDirection(vec3.up());

        var deltaRotX = quat.angleAxis(deltaX * speed, axisX);

        var axisY = mat.multiplyDirection(vec3.right());

        var deltaRotY = quat.angleAxis(deltaY * speed, axisY);

        var rot = transform.getLocalRotation().multiply(deltaRotX).multiply(deltaRotY);

        transform.setLocalRotation(rot);

        curPos = nextPos;

    });
     
    You can easily modify it adding sensitivity or locking the direction. Also take in consideration camera aspect ratio (screen coordinates are in range (0, 1) but height and width are different, so deltaPos needs some scaling to work correctly)
     
    Best
     
    Olha
    Comment actions Permalink
  • Avatar
    Olha
    Snap Lens Network Member Lens Studio Team

    Also you might want to use touchBlocking

    ( https://lensstudio.snapchat.com/api/classes/TouchDataProvider/ )

    Comment actions Permalink
  • Avatar
    Intellify Developer1
    Snap Lens Network Member Lens Studio Team

    Bingo Script work as i want , need little more help , is there way to restrict max rotation from both side ?  

     

    for example from horizontal and vertical rotation can not be more than +-45 

    Comment actions Permalink
  • Avatar
    Olha
    Snap Lens Network Member Lens Studio Team
    • Edited

    Hi! Sorry for the late answer.

    This is not exactly what you wanted but here is a cone limit approach, maybe you can utilize it. It can also be used for the gyro camera rotation limitation

    //@input float maxAngle
    //@input Component.Camera camera
    //@input float minOffset = 0.1

    var curPos = undefined;
    var transform = script.getSceneObject().getTransform();
    var startRotation = transform.getLocalRotation();

    var speed = 10.0; const PI = Math.PI;
    var coef = PI / 180.0;
    var maxAngle = script.maxAngle * coef;
    var aspect = 1;

    script.createEvent("TurnOnEvent").bind(function (eventData) {
    aspect = script.camera.aspect;
    print(aspect)
    });

    script.createEvent("TouchStartEvent").bind(function (eventData) {
    curPos = eventData.getTouchPosition();
    });

    script.createEvent("TouchMoveEvent").bind(function (eventData) {
    if (!curPos)
    return;

    var nextPos = eventData.getTouchPosition();
    var deltaX = nextPos.x - curPos.x;
    var deltaY = (nextPos.y - curPos.y) / aspect;
    var mat = transform.getInvertedWorldTransform();
    var axisX = mat.multiplyDirection(vec3.up());
    var deltaRotX = quat.angleAxis(deltaX * speed, axisX);
    var axisY = mat.multiplyDirection(vec3.right());
    var deltaRotY = quat.angleAxis(deltaY * speed, axisY);

    targetRotation = transform.getLocalRotation().multiply(deltaRotX).multiply(deltaRotY);

    angle = quat.angleBetween(startRotation, targetRotation);
    if (angle > PI) {
    angle = Math.abs(angle - 2 * PI);// make sure that angle is in the same range as maxAngle
    }
    if (angle > maxAngle) {
    var ratio = maxAngle / angle;
    targetRotation = quat.slerp(startRotation, targetRotation, ratio);
    }
    transform.setLocalRotation(targetRotation);
    curPos = nextPos;
    });

    Best 

     

    Olha

     

     

    Comment actions Permalink
  • Avatar
    Jhonnel Pica
    Snap Lens Network Member Lens Studio Team

    Hi Olha, thanks for this script. is there a way to control the limitations of negative side and up rotation?

    I need to make my object not rotating downwards, then limit the rotation upwards

    Comment actions Permalink

We're here to help! We just need a little bit of information...

What system are you using?

Have you downloaded the latest version of Lens Studio?

Please download the latest version of Lens Studio. If you still run into this issue, please come back and report it!

Is this issue causing Lens Studio to crash?

What system do you run Lens Studio on?

Version

Graphics

Follow the next steps to help us solve your issue:

  • Copy and paste this text into your TerminalCommand Window
    open ~/Library/Preferences/Snap/Lens\ Studio/ %LOCALAPPDATA%\Snap\Lens Studio Copy Text
  • Press ReturnEnter to run the command. The Lens Studio folder will automatically open
  • Prepare to upload your files: zip the "Log" Folder by right-clicking and choosing "compress."
    Locate the Log.txt file right above it.

    Attach a screenshot of the issue:

Name:

Email:

What is this most relevant to?

Please enter a brief description of your issue:

Thanks for submitting this issue.

Unfortunately, it's likely due to the operating system or hardware you're using – since they don't meet the system requirements for Lens Studio.

Still, we hear you loud and clear, and are logging the issue in case there's ever a workaround we can provide!

Minimum Requirements

Operating System: Windows 10 (64 bit); MacOS 10.11+

Hardware: Minimum of Intel Core i3 2.5Ghz or AMD Phenom II 2.6Ghz with 4 GB RAM; Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 or better; screen resolution of 1280x768 or higher

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!

Keep an eye out for a followup email from us. We may have a couple more questions for you, or we might already have a solution to offer.

Happy creating!

Back
Next Next Next Submit Issue Got It