360 degree scene, control the camera by moving your phone instead of swiping across the screen

🌵 Needle Engine
1

I would like users to view the scene by rotating their phone instead of swiping their finger across the screen. The basic idea was to grieve on the accelerometer. Has anyone ever tried this out?

Original Post on Discord

by user 680853402338721851

2

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

3

Here is what I found for you :brain: Discord

4

Hello Sabrina, it seems you’re interested in using device motion events, such as the accelerometer, to control the camera view in your scene. This can be achieved by creating a component that listens to device orientation events and applies the changes to your camera’s rotation. Below, I’ll outline the steps in pseudocode and follow it up with the necessary TypeScript code.

  1. Create a custom DeviceOrientationControls component extending Behaviour.
  2. In the start method, check if device orientation events are supported and set up event listeners.
  3. Implement an update method to adjust the camera’s rotation based on the latest sensor data.
  4. Add logic to clean up event listeners properly on component destruction.

Here’s the code following the plan above:

*thread_q7dCCpjN84FtpIFwTlXIQSNe*
5

typescript
import { Behaviour } from “@needle-tools/engine”;
import { Camera } from “three”;

export class DeviceOrientationControls extends Behaviour {
private readonly deviceOrientationSupported: boolean;
private camera: Camera;

constructor() {
    super();
    this.deviceOrientationSupported = 'DeviceOrientationEvent' in window;
    if(this.deviceOrientationSupported) {
        window.addEventListener('deviceorientation', this.onDeviceOrientationChange, false);
    }
    this.camera = this.context.mainCameraComponent.camera;
}

private onDeviceOrientationChange = (event: DeviceOrientationEvent) => {
    // Add your logic here to convert device orientation to camera rotation.
    // This is where you calculate your Euler angles or Quaternions based on the event.alpha, event.beta, and event.gamma
    // and apply them to the camera rotation.

    // Example (actual conversion logic will vary):
    let alpha = event.alpha ? THREE.Math.degToRad(event.alpha) : 0; // Z-axis rotation
    let beta = event.beta ? THREE.Math.degToRad(event.beta) : 0; // X-axis rotation
    let gamma = event.gamma ? THREE.Math.degToRad(event.gamma) : 0; // Y-axis rotation

    // Apply rotations to camera
    this.camera.rotation.set(beta, alpha, -gamma);
};

destroy() {
    if(this.deviceOrientationSupported) {
        window.removeEventListener('deviceorientation', this.onDeviceOrientationChange, false);
    }
    super.destroy();
}

}

*thread_q7dCCpjN84FtpIFwTlXIQSNe*
6

In this example, you would replace the placeholder conversion logic with a proper conversion from the device orientation to your camera’s rotation system. It’s important to ensure that the rotation values correspond to the axis and units used by three.js (THREE.Math.degToRad converts degrees to radians, which is necessary as three.js uses radians for rotations).

This example assumes that you’re using Euler angles to represent the rotation, but you could also use quaternions if preferred. Note that handling device orientation can vary between devices and operating systems, so it’s important to test across different platforms. Also, consider handling permissions for the device orientation API as some browsers require user consent to access motion sensors.

You should also make sure to properly manage the scope of event listeners with arrow functions or by binding the methods, to ensure they’re correctly added and removed.

Remember that for improved user experience, it’s a good practice to provide users with an option to switch between touch controls and device motion controls.

1 messages left GPT 4
thread_q7dCCpjN84FtpIFwTlXIQSNe

7

Hey :wave: there’s a gyroscope sample:

8

Usually there might be different need for an approach based on your UX.

Do you want the person to stand and use the full 360?
Or is it just in ~120° range?

One approach uses the gyro directly and the other uses just delta rotation and adds it to your camera.

9

oh great, thanks!
I created a 360 degree scene and the user should have the opportunity to look inside, as if in a 360 degree photo. But it’s really about the movement that it has to turn.

Thanks for the example, I’ll take a closer look.

by user 680853402338721851

10

Let us know if you would have any more questions as you go :slight_smile: