Attempting to transform Go Pro GYRO data into rotational values using Three.js

I am currently working on converting gyro data from Go Pro to Three.js coordinates in order to project the footage onto the inside of a sphere. My goal is to rotate the sphere and achieve 3D stabilization.

https://i.sstatic.net/VYHV6.png

The camera's orientation is set as Z, X, Y for the coordinates.

My approach involves applying a vector to rotate the sphere, similar to this:

    this._nextVec3.set(this._next[0],this._next[1],this._next[2])
    this.el.object3D.rotation.setFromVector3(this._nextVec3)

However, I am facing difficulty getting the rotation to align with the camera's rotation. I suspect it may be related to the left/right hand configuration. Could someone provide assistance?

javascriptthree.jsrotationeuler-anglesgopro

Answer №1

Ensure that you specify the correct rotation.order attribute, especially if it's set to ZXY:

this.el.object3D.rotation.order = "ZXY";

Take a look at the axes in Three.js, as shown in the editor:

https://i.sstatic.net/OwOj7.png

The WebGL axes differ from those of GoPro. It may be necessary to adjust by flipping the X-axis and swapping Z and Y. Try something like this:

let xRot = this._next[0];
let yRot = this._next[1];
let zRot = this._next[2];
this.el.object3D.rotation.set(-xRot, zRot, yRot);

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

Utilize an AJAX call to fetch an array and incorporate it within your JavaScript code

Currently, I am in the process of building a live update chart feature. To access the necessary data, I created a separate file which contains the required information. Through AJAX, I sent a request from my main page to retrieve an Array and incorporate i ...

javascriptarraysajax

What is the reason behind the inability to send an object from the parent component to a child component within a Vue 3 application?

I've encountered an issue while working on a Vue 3 app involving a component and its <User /> subcomponent. Within App.vue: <template> <Navbar /> <Sidebar /> <Content title="Users" /> <Footer ...

javascriptvue.js

Alter Express routes automatically upon updating the CMS

Currently, I am working on a project that utilizes NextJS with Express for server-side routing. lib/routes/getPages const routes = require('next-routes')(); const getEntries = require('../helpers/getEntries'); module.exports = async ...

javascriptexpressnext.jscontentful

Is your Discord bot failing to log on?

I created a discord bot, but I'm having trouble getting it online. There are no errors and I'm not sure why. Here is my code: const TOKEN = "MyBotsToken"; const fs = require('fs') const Discord = require('discord.js'); const C ...

javascriptnode.jsdiscord

Executing unique calculations on Kendo UI Grid Columns

For experienced users, this may seem simple, but as a newcomer, I'm struggling with a basic arithmetic task. I want to multiply one of the column values (DealValue) by 0.05 in my Kendo grid setup. Despite looking through the Kendo docs, I couldn' ...

javascriptjqueryhtmlkendo-uikendo-grid

Is it possible to encounter a MongoDB error for the $or operator in a correctly formatted query?

Here is the problem I am facing: const users = this.mongo.db.collection('Users') let query = { '$or': [ { "email": {'$eq': req.body.email }}, {"username": {'$eq': req.body.username }} ] } users.fi ...

javascriptnode.jsmongodb

Issue with Moment.js: inability to append hours and minutes to a designated time

I have a starting time and I need to add an ending time to it. For example: start=19:09 end=00:51 // 0 hours and 51 minutes I want to add the 51 minutes to the 19:09 to make it 20:00. I've attempted several different methods as shown below, but none ...

javascripttypescriptmomentjs

3-dimensional Force Directed Graph: Substituting Nodes with Visuals

I'm looking for suggestions on how to enhance my use of images as nodes instead of circles in my project. Here is the initial code snippet I am starting with: Code snippet below: <head> <meta content="text/html;charset=utf-8" http-equ ...

d3.jsthree.js3d

The disappearance of the Jquery Datatable following a change in the selected index of a dropdownlist within an ASP.NET

I implemented the jQuery library into my gridview and it proved to be quite useful. Initially, the datatable displayed perfectly on page load. However, upon changing the value of the dropdown list, the jQuery datatable disappeared. In this scenario, the gr ...

javascriptc#jqueryasp.netdatatables

Establishing pathways in Angular 2

I'm currently working on configuring a route so that whenever I visit http://localhost:8080/user/beta/, it will redirect to http://localhost:8080/user/beta/#spreadsheet. The goal is to display the spreadsheet view, but instead of achieving that result ...

javascriptangularjsangular

Arranging ng-grid by a hidden column

Imagine having an array of objects structured like this: { name: ... age: ... dept: ... } Now, if you want to display these objects in an ng-grid with only columns for name and age, you can set it up like this: columnDefs: [{field:'name' ...

javascriptangularjsdatagridng-grid

How can I programmatically grant Chrome access to my microphone?

I am facing a challenge while running tests using webdriverjs and chromedriver as they require microphone permissions. Here is the popup that keeps appearing: https://i.sstatic.net/AYx67.png Attempts made so far: chromedriver.start(['--disable ...

javascriptgoogle-chromeselenium-webdriverselenium-chromedriverruby-mocha

webstorm error: unresolved function or method when using npm azure-storage modules

Encountering a problem with WebStorm IDE when using azure-storage library as it is unable to find the correct methods for intelligent coding (although the code runs without errors). View image of unresolved function or method Appreciate any help you can ...

javascriptnode.jsazurenpmwebstorm

Creating dependent dropdowns using Laravel Inertia Vue: A step-by-step guide

In my AddressController, I have a function called loadCity along with other CRUD functions: public function loadCities(Request $request) { $provinceId = $request->province_id; $cities = Province::where('province_id' ...

javascriptlaravelvue.jsinertiajs

Modify the button text when it is hovered over

I am attempting to modify the text displayed on a button when hovering over it in a React component from Ant Design. However, I have not been successful so far. Button <div className={ status == "verified" ? `${styles.btn1} ${styles.btn1C ...

javascriptcssreactjs

States following form submission in an HTTP request may vary

When attempting to submit a form and receive the results on the same page using AJAX, a JavaScript function is called onsubmit, initiating the AJAX call and including the following code: request=new XMLHttpRequest(); /* set up request here ...

javascriptjqueryajaxformshttp

Can you explain the significance of syntax in sample code (typescript, react)?

const sampleFunction: (inputString: string) => string = inputString => { return inputString.split(""); } I'm a bit confused about the code below and would appreciate some clarification. I understand that only "string" as a type is accepted, b ...

javascriptreactjstypescript

Transitioning to TypeScript: Why won't my function get identified?

I am in the process of transitioning a functional JavaScript project to TypeScript. The project incorporates nightwatch.js Below is my primary test class: declare function require(path: string): any; import * as dotenv from "dotenv"; import signinPage = ...

javascripttypescriptnpm

As I iterate through a MySQL array, JavaScript is able to manipulate the initial displayed data

I'm struggling to achieve the desired outcome with my code. It seems that when I iterate through an array of data, JavaScript only works on the first echoed data. Here is a snippet of the code: <?php $ids = array(); ...

javascriptphpmysqlarraysajax

can you explain which documents outline the parameters that are passed into the express app.METHOD callback function?

As a beginner in javascript and nodejs, I often struggle with understanding callback functions. One thing that particularly confuses me is determining what arguments are passed into a callback function. Let's consider the following example: app.get( ...

javascriptnode.jsexpresscallback