Discovering the perspective from the DeviceOrientationControls in threejs

Currently working on a WebVR environment where I've implemented navigation controls for scene movement and DeviceOrientationControls to make it compatible with my cardboard viewer.

The issue I'm facing is that the controls I have in place are not adjusting properly when I tilt my phone to look around. This causes discrepancies between the control's movements and my actual viewing direction.

For instance, if I turn 180° in the scene and then try to move forward using the controls, it appears as though I'm moving backwards because of the rotated vision angle.

I'm considering implementing suggestions from a Stack Overflow post that recommend placing the controls within a THREE.Object3D() so that I can rotate the parent object. However, unsure whether this will yield the desired outcome...

Answer №1

It would have been beneficial for me to thoroughly explore the numerous three.js examples prior to proceeding. Luckily, I found a relevant example that can be accessed at this link

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

"Using axios and async/await in VUE.JS to perform multiple asynchronous GET

Perhaps this is a somewhat basic inquiry, as I am still learning the ropes of vue.js and javascript. Please bear with me if my question is not well-articulated or if the solution is straightforward... I am facing an issue where I need to retrieve data from ...

Can you explain the role of the next() function in middleware/routes following the app.use(express.static(...)) in Express

When dealing with serving static assets generated from React source code using npm run build, the following method can be used: app.use('/', express.static(path.join(__dirname, 'apps', 'home', 'build'))) To protect ...

What is the best method for organizing data in rows and columns?

I attempted to use my map function to iterate over the data and display it, but I struggled to format it into rows and columns. The requirement is for 5 fixed columns with dynamically changing rows, making array indexing impractical. Here is the code snip ...

Passing an array with pre-defined variables using jQuery's Ajax functionality

Currently, I have a function set up to gather the contents of a form and send it to a PHP page for processing. However, I am facing an issue where no data is reaching the PHP page when sending it via POST or GET methods. function add_new_customer(){ $ ...

How can I reduce the number of pagination links in React js?

I need assistance in limiting the amount of pagination displayed on my website. Currently, I am fetching page numbers from the backend using Axios and useEffect, and then displaying them in JSX. However, I am struggling to limit the displayed numbers. Can ...

When comparing TypeScript class functions with regular functions and variables, which one yields better performance?

When it comes to defining functions, is it better to use variables or functions directly? Also, how does this affect tree-shaking? I am dealing with a lot of calculation-intensive helper classes and I am unsure about the optimal approach in terms of memor ...

Is your href in javascript not functioning properly?

Recently, I completed the development of a mobile web application. Overall, everything seems to be working smoothly except for one issue: there is a link with JavaScript in its href that is causing problems. Strangely enough, this link works perfectly fi ...

What is the best way to include a new user in the memory database when there is no database or storage back-end?

During an online test, I was given the task of adding a user to a database stored in memory. The request body required JSON formatting as shown below: { "id": "aabbbccddeeefff", "name": "User One", "hobbies": [ "swim", "sing", "workout" ] } (Users ...

Experiencing an issue with excess right padding when utilizing Bootstrap 4.5 cards

I am attempting to implement this specific bootstrap 4.5 card layout in my react application, but I am encountering the following two problems: All three cards in the deck have an additional right padding of 44px. The card header is lacking a complete bor ...

Can anyone explain why I keep encountering an endless loop when using react hooks?

Having a bit of trouble with fetching data from a JS file that is mimicking an API with some endpoint methods. When I console log the data, everything seems fine, but for some reason, I keep running into an infinite loop when using hooks. I've tried t ...

Multiple executions of Google API sign in listener

I have been working on a Vue module that allows users to add events to Google Calendar easily. Once a user signs in, there is a listener in place to call a method for adding an event to the calendar. To access the gapi functionalities required for this tas ...

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

I have encountered an issue with my Jest test for an AWS CDK configuration import { expect as expectCDK, matchTemplate, MatchStyle } from '@aws-cdk/assert'; import * as cdk from '@aws-cdk/core'; import { KmsMultiregionPrincipalKey } fro ...

JavaScript tool for implementing sorting features on an HTML table

I am facing an issue with my AJAX-loaded table where I need sorting functionality implemented. Despite searching for various JavaScript plugins, none seem to work efficiently due to slow performance or errors. The structure of my HTML table is unique with ...

Utilizing Vue to link data to an input field

I am struggling with a loop of input elements <li v-for="role in ..."> {{-some html-}} </li> Each input is nested inside the loop as shown below <input type="text" :data-some="role.name" :value="role.name" name="name" ....> While ...

I'm looking to leverage useEffect in React Native to effectively manage and store arrays - any tips on how

Redux has provided me with data called targetFarm, which contains an array of objects in targetFarm.children. targetFarm.children = [ {name: 'pizza'}, {name: 'burger'}, {name: 'lobster'}, {name: 'water'}, ] I am try ...

Using ng-bind-html within a ng-repeat loop

Currently, I am working on developing a custom autosuggest feature where a web service is queried with a search term to retrieve a list of suggestions that are then displayed. My main obstacle lies in trying to highlight the matching term within the sugges ...

Encountered an error while attempting to minify code during the npm run build

After completing my react application using create-react-app , I encountered an issue when trying to build it with npm-build. While there were no problems running it locally with npm start, I faced an error during minification of the code. I attempted ...

Locating a record within a database that contains an objectId field linking to a separate collection

I have defined two collections in the following manner const BookSchema = new mongoose.Schema({ title: String, author: { type: mongoose.Object.Types.ObjectId, ref: "author" } }) const BookModel = mongoose.model(" ...

Issue with Mobile NavBar remaining visible after clicking on target element in HTML CSS

On my website, everything works perfectly with the Nav bar except for when I am on mobile. When I click on any href from my Nav Bar, it directs me to the correct location but does not close the Nav Bar afterward. I need it to function this way: After click ...

Is there a more efficient approach to configuring properties in AngularJS while maintaining a binding?

When trying to set a property in a service equal to data returned from a network call, the conventional method goes like this: //SERVICE// thisService.property = data; //SERVICE// The corresponding controller code usually looks something like this: //CO ...