Synced camera view

đŸŒ” Needle Engine
1

Synced camera. I’m thinking about the following functionality. I want to create a Needle Room. Let’s call it a classroom. There is an instructor and there are students.

Now I would like the instructor to have the opportunity to temporarily synchronize his camera with the students. So that everyone in the room sees the instructor’s camera perspective.

In principle there is the avatar camera. This position is well known.

It would be best if there was a “Share my Camera on/of” button and everyone in the room could see through the instructor’s camera.

What do you think, is this easy to implement?

Original Post on Discord

by user 684154017479524352

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 Matmat, to implement a feature that allows an instructor to synchronize their camera with students in a Needle Room, you would typically use the SyncedCamera and SyncedRoom components. Here’s a general approach to achieve this:

  1. Create a SyncedRoom for all participants.
  2. Assign the instructor a role or a way to identify them as the instructor.
  3. Create a button to toggle “Share my Camera on/off” and ensure this button is only accessible to the instructor.
  4. When the button is toggled on, use the instructor’s camera position, rotation, and other necessary parameters to update the SyncedCamera.
  5. Ensure that all the clients (students) are listening for updates to the SyncedCamera component and adjust their local camera to match the instructor’s camera.
  6. When the button is toggled off, revert back to the individual client’s camera views.

Here is some pseudocode for the functionality:

  1. Check if the user is the instructor.
  2. Add a button that the instructor can press to share their camera.
  3. When the button is pressed, trigger an event in the SyncedRoom that sends the instructor’s camera transform.
  4. All clients listen for the event and, upon receiving it, copy the transform data to their local cameras.

Now, here is some TypeScript code that outlines the process:

*thread_1K8tzfZ5SMPaiARZ1aS5IFRn*
5

typescript
import { Behaviour, SyncedRoom, SyncedCamera, GameObject } from ‘@needle-tools/engine’;
import { Camera } from ‘three’;

export class InstructorCameraShare extends Behaviour {
private syncedRoom: SyncedRoom;
private instructorCamera: Camera;
private isSharingCamera: boolean = false;

async start() {
    // Assuming we mark the instructor uniquely e.g. by a boolean variable or a tag
    const isInstrutctor = this.gameObject.hasTag("Instructor");

    if(isInstrutctor) {
        // Initialize SyncedRoom and instructor camera
        this.syncedRoom = this.getComponent(SyncedRoom);
        this.instructorCamera = this.context.mainCamera;
        // Create UI button to toggle sharing camera
        // ...
    }
}

// This probably runs on a UI button click
toggleShareCamera() {
    this.isSharingCamera = !this.isSharingCamera;
    
    if(this.isSharingCamera) {
        // Share the instructor camera transform
        this.shareCameraTransform();
    } else {
        // Stop sharing the instructor camera, revert back to individual client cameras
        // ...
    }
}

private shareCameraTransform() {
    const cameraTransform = {
        position: this.instructorCamera.position.toArray(),
        rotation: this.instructorCamera.rotation.toArray(),
        quaternion: this.instructorCamera.quaternion.toArray(),
    };
    // Send camera transform data to SyncedRoom
    this.syncedRoom.send("syncCamera", cameraTransform);
}

// On the student clients
private onSyncCameraReceived(transform) {
    if(!this.isSharingCamera) return;

    const { position, rotation, quaternion } = transform;
    // Update the local main camera with the received transform data
    // ...
}

}

*thread_1K8tzfZ5SMPaiARZ1aS5IFRn*
6

To use the above, the SyncedRoom component should be set up to receive and broadcast messages, and you will need additional logic to handle UI, determine who has instructor privileges, initiate the broadcast, and make sure students’ clients listen and respond to the shared camera changes. Please refer to the networking documentation for more details on setting up syncing functionalities.

Keep in mind this example is quite high-level; you would need to fill in additional details like setting up the UI button and the networking specifics. If you have further questions or require more detailed advice, please provide more information or specific aspects you need help with.

1 messages left GPT 4
thread_1K8tzfZ5SMPaiARZ1aS5IFRn

7

There is a SpectatorCamera component that might be what you need but Im not sure if it has a proper API at this point. But perhaps it helps as a starting point