Algorithmically alter the view of the webvr camera

Question

Algorithmically alter the view of the webvr camera

I am looking to dynamically change the position of a view within a webvr scene. My approach involves using the position.add method.

Below is the code snippet that demonstrates how I programmatically move the camera:

 <a-entity position="33 0 -33" rotation="0 180 0" look-controls id="camera" 
       camera="userHeight: 1.6" listener></a-entity>

The camera is moved using this code:

 var obj3d = document.querySelector("#camera").object3D;
 var angleobj = obj3d.getWorldDirection();
 angleobj.y = 0;
 obj3d.position.add(angleobj.multiplyScalar(0.004*3));

While this approach works in normal mode, it fails to move the camera in cardboard mode. How can I programmatically move the camera in cardboard view mode?

javascript aframe webvr

Answer 1

Answer №1

When you switch to "VR mode," a different camera is utilized compared to the one used outside of VR mode.

To handle this, it is recommended to listen for VR enter/exit events and update the camera reference accordingly:

this.el.sceneEl.addEventListener('enter-vr',() => {
     obj3d = document.querySelector("#camera").object3D;
}
this.el.sceneEl.addEventListener('exit-vr',() => {
     obj3d = document.querySelector("#camera").object3D;
}

Consider the implications of head movement causing potential disorientation due to erratic camera behavior.

Diego Marcos from A-frame often suggests providing visual cues on where to look rather than relying solely on user-controlled camera movements (source).

If the previous method does not yield desired results, try manipulating the camera entity directly instead of its object3D:

var obj3d = document.querySelector("#camera");

You can then adjust the camera position using the setAttribute() method:

obj3d.setAttribute("position", {x: _x, y: _y, z: _z});

Answer 2

When you switch to "VR mode," a different camera is utilized compared to the one used outside of VR mode.

To handle this, it is recommended to listen for VR enter/exit events and update the camera reference accordingly:

this.el.sceneEl.addEventListener('enter-vr',() => {
     obj3d = document.querySelector("#camera").object3D;
}
this.el.sceneEl.addEventListener('exit-vr',() => {
     obj3d = document.querySelector("#camera").object3D;
}

Consider the implications of head movement causing potential disorientation due to erratic camera behavior.

Diego Marcos from A-frame often suggests providing visual cues on where to look rather than relying solely on user-controlled camera movements (source).

If the previous method does not yield desired results, try manipulating the camera entity directly instead of its object3D:

var obj3d = document.querySelector("#camera");

You can then adjust the camera position using the setAttribute() method:

obj3d.setAttribute("position", {x: _x, y: _y, z: _z});

Algorithmically alter the view of the webvr camera

Answer №1

Similar questions

How to work with multiple selections in React material-ui Autocomplete

What causes my local storage to be cleared whenever I refresh the page in React with Redux?

unique map customized in a separate browser window

Angular 2 Update RC5: Router Provider Not Found

Different results can be observed when comparing the array ordering in JavaScript between IE8 and Chrome

Exporting a class from an index.ts file may result in a problem where the injected constructor is

Entering a value into an HTML textbox using Awesomium in VB.NET

To properly handle this file type in React, ensure you have the correct babel loader installed

Utilizing timezones with Moment.js

Make Fomantic-UI (Angular-JS) sidebar scroll independently

javascript accessing an external variable inside ajax function

Assigning null values, or initializing values in AngularJS

Utilize Android accelerometer data to bring objects to life with animation

Content within the Iframe is in the process of loading, followed by

Modifications made to the process module in one file are not reflected in a different file

dynamic image size based on mobile device orientation

Downloading and uploading images using AngularJS: A complete guide

The passport.use method is failing to invoke in Node.js when utilizing the passport-local strategy

You cannot directly access an array useState by index in React js, but you can use the map function to

An error occurs when trying to access data from the cities of a specific state. The error message reads: "Unable to retrieve property 'data