Unusual rotational characteristics observed when using hammerjs in conjunction with threejs

I am looking to implement object3D rotation using hammerjs gestures.

The rotation is mostly working, but I am facing two persistent issues that I cannot resolve:

  1. The rotation direction changes unexpectedly. For example, if I start rotating left and then stop, when I try to rotate in the same direction again, it suddenly starts rotating right. This seems to occur randomly and not consistently.

  2. Once the rotation begins, it only continues in the initial direction despite me attempting to change finger movement directions.

This snippet demonstrates my approach to handling the rotation:

public rotateObject3D (e: HammerInput): void {

    if (rotationEnabled) {
      const translation = new THREE.Vector3();
      const rotation = new THREE.Quaternion();
      const scale = new THREE.Vector3();
      const rotateMatrix = new THREE.Matrix4();
      const deltaRotationQuaternion = new THREE.Quaternion();

      this._myObject.matrix.decompose(translation, rotation, scale);

      this._deltaRot = (e.rotation * 0.01);
      deltaRotationQuaternion.setFromEuler(new THREE.Euler(
        0,
        this._deltaRot * (Math.PI / 180),
        0,
        'XYZ'
      ));

      deltaRotationQuaternion.multiplyQuaternions(deltaRotationQuaternion, rotation);

      this._myObject.matrix = rotateMatrix.compose(translation, deltaRotationQuaternion, scale);
    }
  }

Here is how I call this function:

 this._hammerManager.on('rotate', (e) => {
     this._arTools.rotateObject3D(e);
 });

Do you have any suggestions on what might be causing these issues?

Answer №1

It appears that the rotation values you are using are absolute, rather than considering the change in rotation. Let's illustrate this with an example:

  • Rotation1: 12°
  • Rotation2: 10°
  • Rotation3: 5°

Through multiplying your quaternions, the object goes through rotations of 12°, then 22°, and finally 27°, even though it was actually turning back towards 0. This happens because each new rotation is added to the previous one on every event.

The recommended approach is to store the previous rotation value and subtract it from the new one to determine the rotation delta:

var previousRot = 0;
var newRot = 0;

rotateObject3D(e) {
    newRot = e.rotation - previousRot;

    // Using newRot for quaternion calculations or simply modifying .rotation.y
    myObject.rotation.y += newRot

    // Save value for next event
    previousRot = newRot;
}

By following this method, the scenario mentioned earlier will show the actual change in rotation. The object will rotate by +12°, then -2°, and finally -5°, creating a more natural movement pattern.

Remember to reset previousRot = 0 during HammerJS' rotateend event to avoid using the previous gesture's value at the start of a new gesture.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with the structure of React hooks arrays

I have an array containing questions retrieved from the database. Since I do not know how many questions are in the array, I have structured it with mapping functions on each element. <Fragment> <div className="paddingSection"> <h1 cl ...

Troubleshooting issue: Django and Javascript - Why is my dependent dropdown feature not

I am new to using a combination of Javascript and Django. Below is the script I have written: <script> $(document).ready(function() { $("#source").change(function() { var el = $(this); var reg = ...

What sets apart the concept of asynchrony in C# from that in JavaScript?

When working with Python and JavaScript, a common issue arises due to blocking the event loop. This occurs when code is executed in a single thread and only one synchronous operation can be performed at a time. Interestingly, this problem does not seem t ...

What is the maximum number of JSON responses that can be handled by AJAX?

Upon entering the site, I am attempting to receive a JSON as an AJAX response. However, I am curious if there is a limit to the size of the object I can retrieve - whether through a GET or POST request? $http({ method: 'POST', url: &apos ...

Does jQuery UI Layout have compatibility issues with jQuery version 3.3.1?

jQuery UI Layout is compatible with older versions of jQuery, but not with newer versions... Here is a working example: <html> <head> <script src="http://layout.jquery-dev.net/lib/js/jquery-1.4.2.js"></script> <script ...

Creating an array by extracting items from a textarea that are separated by line breaks

I am working with a textarea that has the id #list : $text = $('#list').val(); The goal is to split this text into pieces and place each piece as a new item in an array. This array will then be sent to PHP, where I can utilize it in a foreach l ...

Creating a new object within a class in ECS6: A step-by-step guide

Just starting out with ES6, and I'm trying to figure out how to correctly instantiate new objects inside a class. Any guidance on the best approach for this? Also, I'm struggling with accessing the connection in the function getName(). I know I ...

Filtering Dropdown List in AngularJS with a Text Input Field and a Submit Button for Filtering Option Values

After exploring , I discovered a feature that enables users to type in a text box and filter results in a pseudo-dropdown. My goal is to enhance this functionality or come up with a better approach for users to type and filter select box options, ultimate ...

Creating a JavaScript anchor through a backend bean function

Is it crazy to want to create an anchor that can be called from a backing bean method using JavaScript? I need to do this for specific reasons, utilizing a commandButton with ajax set to false. I'm attempting the following approach: RequestContext.g ...

Sending a JavaScript array to an MVC controller in .NET 5.0 via a POST request

Trying to send data from a JavaScript array to an MVC controller. While debugging, I end up in the method public void GetJSArray(List<SelectorModel> selectorModels) However, the selectorModels is currently showing as null. Below is the model being ...

Having trouble accessing JSON response properties within an Angular.js controller

My Angular.js controller is called 'forecastController'. This is the code for the Angular.js Controller: weatherApp.controller('forecastController', ['$scope','$routeParams','cityService', 'weat ...

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

Tips on setting up a dropzone upload feature with a click-trigger option

Is there a way to configure dropzone.js so that the file is uploaded only when a submit button is clicked, rather than automatically? Here's the code snippet I am currently using: $('#myDropzone').dropzone({ url: SITE_URL + 'self_r ...

Error: The method "next" cannot be used with BehaviorSubject

My goal is to share data between sibling components by utilizing a shared service. The first component loads and retrieves a list of Servers from the API, populating a select box with all the servers. I now need to notify the other component when the user ...

What is the best way to transfer values from an AJAX script to the rest of the Javascript code?

Currently, I am diving into the world of a django 2.0 template along with a third-party jQuery script used for tagging photos and my own JavaScript code that acts as the "glue." Despite being new to JavaScript and JQuery, I managed to make a successful aja ...

I am having trouble installing the latest version of Bun on my Windows operating system

When attempting to install Bun on my Windows laptop using the command npm install -g bun, I encountered an error in my terminal. The error message indicated that the platform was unsupported and specified the required operating systems as darwin or linux w ...

Preventing blank text entries in a task management application

Is there a way to determine if the text input provided by the user is empty or contains some text? I'm in the process of developing a TO-DO app and I'd like it so that if a user fails to enter anything into the text area and clicks on "add", the ...

How can you use CommonsChunkPlugin in Webpack to bundle multiple entries into common chunks?

If I have two pages named Page1 and Page2, both utilizing libraries like jquery and backbone that I want to combine into a single file, with shared modules (excluding the vendors) in another file, here is the webpack configuration: Some example code here. ...

Unable to process login information with form method post on basic login page

Hi, I've been struggling with a simple login page issue. It works fine with Bootstrap, but I want to switch to Angular Material Design. I've been searching for the problem for about 3-4 hours and can't find anything. I suspect that the form ...

The popup input fields of ckeditor encounter issues when combined with a bootstrap 5 modal (ckeditor version 4)

Encountered an error while using ckeditor in a bootstrap 5 modal. It seems to be a common issue with various solutions available for different bootstrap versions, but I'm struggling to find one for bootstrap 5. Could someone please take a look? Here ...