Accessing and Manipulating the Camera in the Treble SDK

Development
1

Hi everyone!

I’m currently working on a project using the Treble SDK for React and I’m trying to find a way to access and manipulate the camera in the Threekit player.

Specifically, I want to store the last camera position and then programmatically set a different user’s camera angle to match the stored one. This would allow us to create a consistent viewing experience across different users.

I’ve looked through the Treble SDK documentation but couldn’t find detailed information on accessing or manipulating the camera directly. In the context of Three.js, I understand that the camera is usually accessible through the scene or renderer. However, I’m not sure how this translates to the Threekit player in the Treble SDK.

Here’s a general approach I’m considering:

// Access the player or scene
const player = usePlayer();
const scene = useScene();

// Access the camera
const camera = player.camera; // or scene.camera

// Manipulate the camera
camera.position.set(x, y, z);
camera.rotation.set(rx, ry, rz);
camera.updateProjectionMatrix();

I’m not sure if the usePlayer or useScene hooks exist, or if the camera is accessible through the player or scene in this way. I’m also unsure about the methods for manipulating the camera.

Could you please provide some guidance on how to access and manipulate the camera in the Threekit player using the Treble SDK? Any examples or references to the relevant parts of the documentation would be greatly appreciated.

Thank you in advance for your help!

Sean

2

Hey Sean - all of the regular features available in our Player API are available in Treble, that includes the Camera methods.

The only thing to be aware of is that Treble typically makes the player available at threekit.player so that’s where your methods may be available.

3

Thanks, @Will! I appreciate your quick reply!

As I’m still a little new to the Treble SDK, would can you guide me on how to access the threekit object from within React? Is there a hook that returns it?

Thanks again!

4

Ah, yes! The threekit object is tied to the window when the player is initialized and it’s not super obvious so apologies for not being more clear. Treble pretty much does this:

image
image1412×810 100 KB

except it ties the player API to window.threekit.player

Let me know if that helps

5

Got it! Thanks, Will this is a huge help!

Sharing my Treble React component code here in case someone else is looking for a similar solution!

import { useEffect, useRef, useState } from 'react';
import { usePlayerPortal } from '@threekit-tools/treble';

const PLAYER_DIV_ID = 'tk-player-component';

export default function Player(props) {
  const [portalPlayerTo, portalBack] = usePlayerPortal();
  const hasMoved = useRef(false);

  const [player, setPlayer] = useState(null);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (window.threekit) {
        setPlayer(window.threekit.player);
        clearInterval(intervalId);
      }
    }, 100);
    return () => clearInterval(intervalId);
  }, [window.threekit]);

  useEffect(() => {
    if (player) {
      console.log('player', player);
      console.log('.getPosition', player.camera.getPosition());
      console.log('.getQuaternion', player.camera.getQuaternion());
    }
  }, [player]);

  useEffect(() => {
    if (portalPlayerTo && !hasMoved.current) {
      portalPlayerTo(PLAYER_DIV_ID);
      hasMoved.current = true;
    }

    return () => {
      if (portalBack) {
        portalBack();
        hasMoved.current = false;
      }
    };
  }, [portalPlayerTo]);

  return (
    <div className="h-full max-w-screen-sm">
      <div id={PLAYER_DIV_ID} className="h-full" />
      {props.children}
    </div>
  );
}
1 Like