Coordinates in a 3D space following a rotation

I have two specific points, C and P.

My goal is to rotate point P around center C in three dimensions.

How can I determine the new coordinates of point P after rotation?

I am provided with two angles: 'yaw' and 'pitch'.

The 'yaw' angle moves point P around center C along the 'x' axis, causing it to move left or right in relation to the point.

On the other hand, the 'pitch' angle moves point P around center C along the 'y' axis, making it move up or down in relation to the point.

In terms of depth, the 'z' direction moves towards you in a positive manner and away from you in a negative manner.

Naturally, I would like this calculation to also work with intermediate positions, such as when both yaw and pitch are at 45 degrees.

Both Yaw and Pitch angles are initially given in degrees but need to be converted to radians for the code.

p.x = c.x + Math.sin(yaw) * Math.sin(pitch);
p.y = c.y + Math.cos(yaw);
p.z = c.z + Math.cos(yaw) * Math.cos(pitch);

Visualize a sphere with a point on its surface - I aim to move this point along the circumference of the sphere.

While this method works sometimes, there are instances where it does not. What could I be overlooking?

If this inquiry appears redundant, please excuse me as I am unsure what terms to search for.

For further reference, I have included a fiddle showcasing my issue: http://jsfiddle.net/Jm6Lt/2/

The position of the blue sphere is calculated, while the white sphere is rotated around the red sphere's center.

Answer №1

The information you provided refers to the spherical coordinates on a sphere with a radius of 1 around point C.

To understand how to rotate a given point, I recommend researching "rotation matrix" and "Givens rotation". These operations involve rotating a point based on a specific formula:

P'=C+R*(P-C), 

Here, R represents a rotation matrix.


There seems to be a slight error in the spherical coordinates. The correct values should be:

p.x = c.x + Math.sin(yaw) * Math.sin(pitch);
p.y = c.y + Math.cos(yaw);
p.z = c.z + Math.sin(yaw) * Math.cos(pitch);

For the vector at (yaw, pitch)=(0,0), it would be (0,1,0) (prior to translation by C). These coordinates depict the rotation of the vector first in the y-z-plane around the x-axis with a yaw angle, followed by rotation around the y-axis with a pitch angle.

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

Tips on swapping out an image multiple times as you hover over various text options

As a Designer creating a portfolio website, I have a good understanding of HTML and CSS. Here is my homepage: https://i.sstatic.net/WWMPA.png I am looking to create a feature where different images are displayed in a red circle preview when hovering over ...

Modify the colors of names within an array of point names and their corresponding y values using Highcharts

I am trying to customize the color for each point in an array based on its name and y value. This is what I have so far: (function(H) { H.wrap(H.Series.prototype, 'getColor', function(proceed) { this.color = generateColorForString(this.na ...

Jquery Validation Plugin - Specifically for validating numeric inputs in specific situations

I am currently working on implementing validation using jQuery Validate for a numeric value, but only when a specific radio button is checked. If the radio button is not checked, the field should be required and allow alphanumeric values to be entered. How ...

Utilizing ng-click within a tooltip

I've implemented Angular Bootstrap UI and successfully added a tooltip to my project. Snippet of HTML: <div ng-app="helloApp"> <div ng-controller="helloCtrl as hello"> <a tooltip-trigger="click" tooltip-placement="bottom" uib-t ...

Example of a chat server code using NodeJS

I'm looking to add a chat module to my web application. After searching on , I found several chat modules but none of them have clear examples on how to implement them in my project. Can someone share a tutorial that is based on existing NodeJS modul ...

List of Years in JavaScript for a dropdown menu

I am working on implementing a dynamic select box in JavaScript that should display a range of years, starting from a specific year and ending with the current one. I'm curious if there is anything similar to Ruby's range class in JavaScript or i ...

Tips for executing specific javascript on small screens or mobile devices

I am currently in the process of developing a Vue web application that needs to be functional on all devices. I have certain code that should only run on small screens or mobile devices. Right now, I am using an if statement with $(window).width() to achie ...

Is it appropriate for a search service to provide a 404 response?

In the world of web development, let's say I have a server-side search feature that is triggered by JavaScript (AJAX). What happens if I search for something like "chewy dragees", and although the server successfully receives the search request, it do ...

JS Metro app is not receiving push notifications

Currently, I am in the process of integrating push notifications into a JS Metro app. After registering for push notifications and obtaining a Channel URI, I update it in my locally hosted WCF service if it is new. Within my service, I authenticate with WN ...

Tips for extracting a value from a mongodb aggregate operation

I am attempting to retrieve a value from a MongoDB aggregate in order to display it on an EJS page using the totalAmount variable. The result I am currently receiving is [{"totalAmount":42}] and my goal is to extract only the number, in this case, 42. My ...

Deactivating simultaneous Ajax calls in jQuery

What is the best way to stop (abort) a jQuery deferred object with multiple Ajax calls, ensuring that any pending Ajax calls are not executed? Here is an example code snippet: var deferred = $.when( $.getJSON( "a.json" ), $.getJSON( "b.json" ) ) .don ...

Having Trouble Opening Bootstrap 4 Modal with a Click?

I'm having trouble getting my modal to open. I've tried using the basic HTML code from the Bootstrap 4 site and also added some Javascript, but it's not working. I can't seem to figure out what I'm doing wrong. Any assistance would ...

[Babel]: The option foreign.Children is not recognized

I encountered an error while building with the following script: webpack --colors --progress --watch --config --jsx-loader webpack.config.js Below is the content of my package.json file: { "dependencies": { // List of dependencies here }, "dev ...

Change an array into JSON format using the extJS library

Within my extJS form, I am utilizing a multiselect combobox. Upon submission, it provides an array of strings. I am looking to convert this array into JSON format in a specific way. As an example, the initial array may look like this: categories : [&apos ...

I possess an array with a specific structure that I wish to substitute the keys as demonstrated below

The data array is currently structured in this way. I have attempted various methods but have not been able to find a suitable solution. I need to send the JSON below via an AJAX request, however, I do not want the keys 0 and 1 in both child arrays. [sch ...

Performing tasks when a component is fully loaded in Vue.js Router

I am currently working on a project involving a single-page application built with Vue.js and its official router. For this project, I have set up a menu and a separate component (.vue file) for each section that is loaded using the router. Inside every c ...

Blank page shown when routing with Angular in Rails

Hey there, I'm currently attempting to integrate Angular into my Rails application and unfortunately I'm encountering a problem where the HTML page shows up blank. Here's the code I have so far: app/views/index.html.erb <body> ...

How can you make nested JSON values optional in Joi Validation?

As I work on my API, I encounter a nested JSON structure that serves as the payload for the endpoint. Here is an example of what it looks like: {"item_id":"1245", "item_name":"asdffd", "item_Code":"1244", "attributes":[{"id":"it1","value":"1"},{"id":"it2" ...

Issues with Angular directive causing form field validation to malfunction

Currently, I am working with the most recent version of AngularJS, specifically 1.2rc3. Bootstrap is being utilized for styling purposes and I have a directive set up as follows: angular.module('form.field', []) .directive('efield', f ...

Retrieve the text value of a selected option in a v-select component

After reading some documentation about v-select and slots, I am a bit confused about whether it can be applied to my specific scenario on this codepen. All I really need is to capture the selected text (not the value) and utilize it somewhere in the code: ...