Using Three.js to compute the delta quaternion

Struggling to determine the delta quaternion between the startOrientation and the endOrientation. Check out this demo showcasing my issue.

Initially, I calculate the delta quaternion and then try to apply it to the endOrientation in order to achieve the startOrientation, but unfortunately, it's not producing the desired results. The cube's rotation is consistently incorrect.

Feel free to uncomment line 37 to observe the correct rotation of the cube. Any suggestions on how to properly compute the delta?

Answer №1

Let's take a closer look at what you are trying to calculate. Begin with

gyro = start^(-1)*end

and then adjust the scene rotation to

scene = end*gyro = end*start^(-1)*end

It is evident that this product does not result in the desired start quaternion. Considering the assumption that

start == scene = end*gyro

you will need to evaluate

gyro = end^(-1)*start

This means swapping end and start in your current calculation of gyro.


Furthermore, investigate which quaternion methods modify themselves (all except for .clone() if the outcome is a quaternion).

The .inverse() method, equivalent to .conjugate().normalize(), falls under this category. Therefore,

var gyroTrackingDelta=endOrientation.inverse();

initially reverses endOrientation and subsequently shares reference with gyroTrackingDelta, leading to unexpected side effects during future calculations. A more reliable alternative to avoid unintentional self-modification would be

var gyroTrackingDelta=endOrientation.clone().inverse();
gyroTrackingDelta.multiply(startOrientation);

scene.quaternion.copy(endOrientation).multiply(gyroTrackingDelta);

Answer №2

Are you required to utilize the THREE.Quaternion.slerp function?

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

Setting an object as a global variable in AngularJS

When working with plain javascript, I have the ability to group similar functions into an object called Monolog: var Monolog = { notify: function(title, message) { // Do something with title and message }, confirm: function(title, message ...

leveraging Ajax to submit a segment of the webpage

-Modified- Greetings, I am facing a situation where I need to post only the second form on a page that contains two forms. The second form has a function for validating data such as date, email, etc. My goal is to send the second form without reloading ...

Using callbacks in Node.js to pass variables

I'm relatively new to working with node and I'm attempting to develop a function that retrieves server information. However, I've encountered an issue. I've set up a config object (which will eventually be dynamically updated by certain ...

Merge Line and Column Graph in antd (ant design)

I created a line chart and a column chart that share the same x-axis (time). I'm wondering how I can merge these two charts using Ant Design Charts in React. Any suggestions on how to add a y-axis on each side of the graph to display their different s ...

Oops! An error occurred indicating that the ES Module is required using the require() function

When running version 13, the terminal displays the following error: Error:const ms = require('parse-ms') // npm i parse-ms ^ Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\DELL\OneDrive\Desktop\Discord Bot&bso ...

download image using React map method

I am trying to transfer an image from one useState variable to another when it is clicked const [photos, setPhotos] = useState([]); useEffect(() => { setPhotos(PhotoArray); }, []); This is the source image that I am using: export const PhotoArr ...

Acquiring the input from a text box to generate a hyperlink on the current page

I am trying to generate a link that has the href attribute as follows: app\process?val=12000 The catch is that the value for the val parameter (in this case 12000) needs to be derived from a textbox on the page. I am aware that I can retrieve the ...

Having trouble starting the server? [Trying to launch a basic HTML application using npm install -g serve]

I am in the process of creating a PWA, but I haven't reached that stage yet. Currently, I have only created an index.html file and an empty app.js. To serve my project locally, I installed serve globally using npm install -g serve When I run the co ...

What is the reason behind taps in TypeScript only registering the first tap event?

One issue I am encountering is that only the first tap works when clicked, and subsequent taps result in an error message: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') Here is the code I am using: https://codepen ...

Height restriction on Facebook Comments iFrame when utilizing HTML document instead of a web link

I need to load a Facebook comment page from a local file instead of a URL for my Mobile App. The reason is that I require a template file to create multiple comment pages. Although the FB comments do load, the iFrame always has a fixed height, limiting th ...

Omit specific module from a webpack 4 chunk

Is there a way to exclude a specific module from being included in a chunk using webpack 4? For example, let's say I do not want lodash to be included in the vendor file at all costs. How can this be achieved? Here is the current configuration: spli ...

What causes the issue of divs not stacking properly when using Bootstrap 4?

I'm currently working on integrating VueJs and bootstrap4 to create two basic components. However, I am facing an issue where I have assigned the class .col-md-4 to a div in order to add 3 elements per row, but only one element is being added per row ...

Having issues with the querySelectorAll function in my code

I am experiencing an issue with querySelectorAll. Below is my code snippet: $(window).load( function() { // Add animations var wwa = document.querySelectorAll(".wwa-box"); if (window.innerWidth > 992) { wwa.cl ...

Trouble with jQuery: Tackling a Basic String and Variable Issue

I'm having trouble incorporating my variable into this specific string: var liPad = 20; $(this).css({'width' : width , 'height' : height, 'padding' : "'0px' + liPad + 'px'"}); The desired outcome is ...

display pictures on the screen through the use of web addresses

Having trouble displaying images from Flickr on the screen using URLs. Can't seem to get any images to show. Check out the code snippet below: loadimages(e) { e.preventDefault(); this.setState({spinner:true}); console.log('spinner') ...

The Google Maps feature encountered an error (ReferenceError: google is not defined)

Utilizing the Google Maps API on my website to display multiple locations has been successful so far. However, an issue arises when attempting to determine the distance between two sets of latitude and longitude coordinates - resulting in an error message ...

The app.post function is malfunctioning, displaying the error message: "Cannot GET /up."

In the /index.jade file, there is a button that triggers the function window.location.replace("https://upload-andsize.glitch.me/up") when pressed. This function simply redirects from / to /up, which is working fine for GET requests. However, POST requests ...

Having trouble injecting jinja2 variables into a javascript snippet

Does anyone know how to effectively send jinja2 data to Javascript when using Flask? I am currently working with a REST URL in Flask that looks like /logs/<test_case_name>. My goal is to use the .getJSON() method to access this URL, but I am struggli ...

AngularJS does not automatically generate input elements for editing purposes

Trying to make real-time edits to an element by triggering a function on ng-click using AngularJS. My HTML code: <div class="row question">{{questions.1.name}} <a href="" class="glyphicon glyphicon-pencil" ng-click="editQuestion(questions.1.name ...

What is the process for designing a progress bar with Bootstrap steps?

Is there a way to create a linear progress bar with circle markers indicating steps that reflect the user's progress? Take a look at the image below for reference: . I need to display 7 pages in total, numbered from 1 to 6. My current progress bar ...