Skip to content

Selection and hover sync ​

PeerHighlightSync publishes the local selection and hover of a MeshHighlight through room presence, and applies remote ones to highlight.peers. The renderers stay transport-independent; see peer selection and hover.

ts
import * as network from "@jolly-pixel/network/client";
import { MeshHighlight } from "@jolly-pixel/three";
import { PeerHighlightSync } from "@jolly-pixel/three/network";

const client = new network.Client({ identity: { username } });
const room = client.room("my-room");
room.join();

const highlight = new MeshHighlight({ renderer, scene, camera });
const sync = new PeerHighlightSync({ room, highlight });

Every client must register the same id for the same scene object. The sync transports ids and does not reconcile scene graphs.

ts
interface PeerHighlightSyncOptions {
  room: Room;
  highlight: MeshHighlight;
  selectionKey?: string;    // default "selection"
  hoverKey?: string;        // default "hover"
  hoverThrottleMs?: number; // default 80
}
  • Each role reads its key through network.PresenceChannel.
  • Hover throttling keeps the latest hover and sends it once the window ends.
  • A peer missing from both keys, for example after it leaves the room, is removed with peers.removePeer(), which releases its color.

destroy(): void ​

Removes the listeners, drops a pending hover, and clears the remote peers this instance applied. It does not call room.leave().

The entry point also exports PeerObjectId and decodePeerObjectId(). The decoder accepts a string or null; a malformed value returns undefined, which clears that peer's mark.