Compensating for the variations in camera rotation specifications between standard and virtual reality mode within the aframe framework

I'm currently developing a WebVR project using Aframe that features multiple miniature 3D scenes (approximately eight) surrounding the viewer. To view each scene, users must rotate their viewpoint accordingly.

Since the number of scenes surpasses what can be accommodated within a 360-degree rotation, I am handling content loading and unloading by monitoring the camera's current rotation. For instance, scene number seven is only visible when the y-axis value of the a-camera falls between 720 and 840 degrees (converted to radians).

This method functions effectively due to the fact that in non-VR mode, the y-axis value of the camera extends from 0 to infinity in both directions.

However, the camera rotation behavior differs in non-VR mode. In VR mode, the y-axis rotation of the camera ranges between 0 and 180 or 0 and -180. When rotating counterclockwise, the y-value transitions from 180 to -180, rendering my previous subscene visibility calculation ineffective.

I am exploring ways to translate the rotation values obtained from the camera in VR mode to align more closely with the non-VR mode operation.

Hopefully, this explanation clarifies things. It indeed presents a bit of a puzzle...

Shown below is my code, which requires significant refactoring but serves its purpose for now:

if (cameraRotY >= 0 && cameraRotY <= degreesToRadians(120) && !self.is('stonehenge')) {
        removeAllStates(self);
        document.querySelector('#SceneStonehenge').emit('show');
        self.addState('stonehenge');
    } else if (cameraRotY > degreesToRadians(120) && cameraRotY <= degreesToRadians(240) && !self.is('phoneVines')) {
        removeAllStates(self);
        document.querySelector('#ScenePhoneVines').emit('show');
        self.addState('phoneVines');
    } else if (cameraRotY > degreesToRadians(240) && cameraRotY <= degreesToRadians(360) && !self.is('skyFish')) {
        removeAllStates(self);
        document.querySelector('#SceneSkyfish').emit('show');
        self.addState('skyFish');
    } else if (cameraRotY > degreesToRadians(360) && cameraRotY <= degreesToRadians(480) && !self.is('rocksPlanets')) {
        removeAllStates(self);
        document.querySelector('#SceneRocksPlanets').emit('show');
        document.querySelector('#SceneRocksPlanetsContents').emit('show');
        self.addState('rocksPlanets');
    } else if (cameraRotY > degreesToRadians(480) && cameraRotY <= degreesToRadians(600) && !self.is('floatingIslands')) {
        removeAllStates(self);
        document.querySelector('#SceneFloatingIslands').emit('show');
        self.addState('floatingIslands');
    } else if (cameraRotY > degreesToRadians(600) && cameraRotY <= degreesToRadians(720) && !self.is('skywhale')) {
        removeAllStates(self);
        document.querySelector('#SceneSkywhale').emit('show');
        self.addState('skywhale');
    } else if (cameraRotY > degreesToRadians(720) && cameraRotY <= degreesToRadians(840) && !self.is('crack')) {
        removeAllStates(self);
        document.querySelector('#SceneCrack').emit('show');
        self.addState('crack');
    } else if (cameraRotY > degreesToRadians(840) && cameraRotY <= degreesToRadians(960) && !self.is('blackhole')) {
        removeAllStates(self);
        document.querySelector('#SceneBlackhole').emit('show');
        self.addState('blackhole');
    }
javascriptthree.jsaframewebvr

Answer №1

To modify the appearance controls, or to monitor the number of degrees the camera has rotated separately, you can utilize a separate variable. Here is a basic code snippet in component form. While untested, it conveys the fundamental concept:

AFRAME.registerComponent('total-rotation', {
  dependencies: ['rotation'],

  schema: {
    degrees: {default: 0, type: 'number'}
  },

  init: function () {
    this.previousRotation = this.el.getAttribute('rotation');
  },

  tick: function () {
    var currentRotation = this.el.getAttribute('rotation');
    var totalRotation = this.data.totalRotation;
    totalRotation += currentRotation.y - this.previousRotation.y;
    this.el.setAttribute('total-rotation', 'degrees', totalRotation);
    this.previousRotation = currentRotation;
  }
});

Next, attach this to the camera entity:

<a-camera total-rotation></a-camera>

You can then access the total rotation whenever needed by using the following code:

document.querySelector('[camera]').getAttribute('total-rotation').degrees;

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

The body parser is designed to efficiently parse and handle both gzip and json formatted HTTP POST request bodies

I've set up an API endpoint to manage http POST requests from a client. At the moment, I'm using Express framework and bodyParser to handle request bodies. What I need help with is configuring body-parser to effectively handle cases where request ...

javascriptnode.jsexpresshttp-postbody-parser

Using postMessage with an iframe is causing issues within a React application

I encountered two errors when executing the code below in my React application: try { iframe.src = applicationRoutes.href; iframe.style.width = '0px'; iframe.style.height = '0px'; iframe.style.border = '0px& ...

javascriptreactjsiframe

Retrieve the value of a variable within the .each() function in jQuery

I have the following code that is functional. However, when I uncomment the "if" statement, an alert pops up as soon as I enter something in the input field. I would like the "sum" value to trigger the alert only after I have entered values in all 3 inpu ...

javascriptjqueryvisualforce

Utilize Ajax and PHP to transfer User ID to the Database

One issue I'm facing is that I have a page where my users' posts are displayed, and each post has a connect button in the form of form input. The poster's id is associated with each post. I want it so that when a user clicks on the connect b ...

javascriptphpjqueryajaxsqlite

What is the best way to ensure a table is responsive while maintaining a fixed header? This would involve the table scrolling when it reaches the maximum viewpoint, while also keeping

Can anyone help me create a responsive table with a fixed header that scrolls when it reaches the maximum viewpoint without scrolling the entire page? I've tried using box-sizing: border-box; and overflow-x:scroll; but it didn't work. Any suggest ...

javascripthtmlcss

Ways to examine a JavaScript Bound Function

Can a JavaScript bound function be inspected somehow? I need to be able to return a bound function from a function, and when unit testing, I'd like to verify the bound function's target, boundThis, and boundArgs. These properties seem to be inte ...

javascript

Trouble with Directive - the watch function isn't functioning as expected

After spending countless hours and trying almost everything, I can't seem to get it to work... I have an Angular directive that calls another Angular directive. I need to handle events in the child directive. So my child directive looks like: ...

javascriptangularjs

Is there a way to repurpose a JavaScript object that gets sent back to the client upon page loading?

Upon initial page load, an AJAX request fetches a list of JavaScript objects which display only one value each. The page includes buttons to expand each item and reveal the remaining values. Originally, I used another AJAX call to retrieve individual objec ...

javascripthtmlnode.jsajaxexpress

Utilizing nested v-for in Vue.js with lodash's groupBy function

When fetching data from a database, I am using lodash groupby to group my data like so: var vm = this axios.get(this.buildURL()) .then(function(response) { Vue.set(vm.$data, 'model', response.data.model) vm.groupData = _.groupBy(vm.model ...

javascriptvue.jsvuejs2lodash

having trouble with my lambda function reading the basic json object

I recently joined Lambda and have been attempting to create a simple JSON object. However, I keep encountering an error that says "parsing error, unexpected token." Here is my code, which I have verified to be valid JSON: { "metadata": { ...

javascriptjsonamazon-web-servicesaws-lambda

Tips for identifying and handling a 400 bad request error in an HTTP response within an Angular 2 application

I attempted to handle the error 400 bad request in this manner: catch((error: any) => { if (error.status === 500) { return Observable.throw(new Error(error.status)); } else if (error.status === 400) { console.log( 'err ...

javascriptangularhttp-status-code-400

Examples of using React tables with Material-UI, such as the Material-UI kitchen sink demo, will showcase how to

Can someone help me figure out why the values are not visible in the react table MUI kitchen sink? When I switch to JSON, the header is visible but the data in the table disappears. Both 'data' and 'data1' have the same structure accord ...

javascriptreactjsmaterial-uireact-table

Error: The Next.js webpack module is missing in the npm local package

I'm currently developing a Next Js application that utilizes its mongoose models from a local npm package, allowing for shared functionality across different backend components. However, I am encountering the following errors: Module not found: Can&ap ...

javascriptnpmwebpacknext.js

Extending a yet-to-be-created JavaScript (Node.js) object

I am working on implementing a feature similar to ExpressJS' res.send(), utilizing a portion of the NodeJS Http response object. An Http server can be set up as follows: res.send = function(data){ // Define the behavior of res.send here } var res ...

javascriptnode.jsexpressmiddleware

Tips for preventing nested subscriptions from exceeding two levels

I have four subscriptions that depend on each other. While there are numerous suggestions on avoiding nested subscriptions, they often don't address more than two levels of nesting. How can I prevent so many nested subscriptions? This is the code fo ...

javascriptangular

JS switch for numerous container elements

How can I create a toggle slider in HTML for multiple elements displayed using foreach? Each element should open a div block with specific information and have a close button. Unfortunately, I haven't been able to find any suitable code to achieve thi ...

javascripthtmlcss

Valid method of confirming a user's login status

Using AJAX requests, I have implemented a user area on my website. The "Log off" button is supposed to be displayed only when the user is logged in. Here is the AJAX request for logging in a user: function requestSI() { var xhr = getXMLHttpRequest(); xhr ...

javascriptajax

When the enter key is pressed, the form will be automatically submitted

My current implementation includes the utilization of Bootstrap input tags as shown below: myPage.html <form th:object="${field}" name="modal" method="post" th:action="@{/ajouterFieldEcran}"> ... <div class="form-group row"> <label ...

javascripthtmlbootstrap-4bootstrap-modal

What is the method for utilizing the value component as the key for the second component?

In my JSON data below: [{"id":19,"text":"A-Z CLI 19/03/2015"},{"id":36,"text":"Wavetel Retail1"},{"id":37,"text":"Wavetel A2Z Platinum"},{"id":38,"text":"Wavetel A2Z Gold"},{"id":40,"text":"mysql test2"},{"id":63,"text":"inbound test"},{"id":137,"text": ...

javascriptjqueryarraysjson

Issue encountered when trying to add data into MySQL database

Having trouble inserting data into my MySQL database, even though I believe I'm doing it correctly. Does anyone know how to troubleshoot this issue or if I may have overlooked something? Everything seems to be working fine, but for some reason, it&apo ...

javascriptphpajax