Technologies:

javascript

Tolerim

21 hours ago

### How can I convert Safari's device orientation to absolute device orientation?

## Additional Details

`window.event('deviceorientation'`

and applying a bit of geometry, I have discovered how to rotate the camera in accordance with the device's orientation. However, attempts to eliminate the Y-axis orientation and add the compass heading angle along the axis have resulted in unnecessary camera rotation. The "bit of geometry" was accomplished with the following code:
```
const offset = new THREE.Quaternion().setFromAxisAngle(
new THREE.Vector3(-1, 0, 0),
Math.PI / 2
);
const eulerOrientation = new THREE.Euler(beta, alpha, -gamma, "YXZ")
return new THREE.Quaternion().setFromEuler(eulerOrientation).multiply(offset)
```

Answers(1)

Tolerim

21 hours ago

Verified Answer

To convert the relative orientation to absolute orientation based on compass heading, you can use the following steps:
1. Get the device's orientation using

**window.event('deviceorientation')**. 2. Extract the compass heading value from the orientation data. 3. Rotate the THREE.js camera according to the compass heading angle around the Y-axis using**camera.rotation.y**. 4. Apply the remaining rotation around the X-axis and Z-axis using the "bit of geometry" code you have already implemented. Here's an example code snippet:```
function handleDeviceOrientation(event) {
// Extract orientation data
const { beta, alpha, gamma } = event;
// Extract compass heading angle
const heading = alpha;
// Rotate camera around Y-axis
camera.rotation.y = (heading / 180) * Math.PI;
// Apply remaining rotation using "bit of geometry" code
const offset = new THREE.Quaternion().setFromAxisAngle(
new THREE.Vector3(-1, 0, 0),
Math.PI / 2
);
const eulerOrientation = new THREE.Euler(
beta,
alpha,
-gamma,
"YXZ"
);
const absoluteOrientation = new THREE.Quaternion()
.setFromEuler(eulerOrientation)
.multiply(offset);
camera.quaternion.copy(absoluteOrientation);
}
window.addEventListener("deviceorientation", handleDeviceOrientation);
```

In this example, we first extract the compass heading angle from the device's orientation data. We then rotate the camera around the Y-axis by the heading angle. Finally, we calculate the absolute orientation using the "bit of geometry" code and apply it to the camera.