Skip to main content

Bitmoji 3D

The Bitmoji 3D package downloads and displays 3D Bitmoji avatars in Spectacles Lenses.

Prerequisites​

  • Lens Studio v5.15.0 or later
  • Spectacles OS v5.63.x or later
  • Bitmoji 3D package (available in Asset Library)

Installation​

  1. Open your Spectacles project in Lens Studio
  2. Navigate to Asset Library
  3. Search for "Bitmoji 3D"
  4. Click "Install" to add the package to your project

Connected Lenses Usage​

Bitmoji 3D can be used with Spectacles Sync Kit to display avatars for users in a Connected Lens session. Retrieve the SnapchatUser object from the active session, then download and instantiate the Bitmoji avatar using the steps below.

Setup​

  1. Install Bitmoji 3D and Spectacles Sync Kit from Asset Library
  2. Follow the Spectacles Sync Kit documentation to set up your multiplayer session
  3. Add a Bitmoji 3D component to your scene
  4. Configure it: Set Bitmoji Type to "None" and disable Auto Download
  5. Create a script and reference the Bitmoji component as an input

Code Example​

Step 1: Get SnapchatUser from Connection ID

import { SessionController } from "SpectaclesSyncKit.lspkg/Core/SessionController";

private sessionController: SessionController = SessionController.getInstance();

private getSnapchatUserByConnectionId(connectionId: string): Promise<SnapchatUser> {
    return new Promise((resolve, reject) => {
        const session = this.sessionController.getSession();
        const matchingUserInfo = session.activeUsersInfo.find(
            (userInfo) => userInfo && userInfo.connectionId === connectionId
        );

        if (matchingUserInfo) {
            session.getSnapchatUser(matchingUserInfo, resolve);
        } else {
            reject(`User ${connectionId} not found in active users`);
        }
    });
}

Step 2: Download Avatar for User

import { Bitmoji3D } from "Bitmoji 3D.lsc/Bitmoji 3D.lsc/Bitmoji 3D";

@input
bitmojiComponent: Bitmoji3D;

private async loadPlayerBitmoji(connectionId: string) {
    try {
        const user = await this.getSnapchatUserByConnectionId(connectionId);
        await this.bitmojiComponent.downloadAvatarForUser(user);

        const avatar = this.bitmojiComponent.getAvatar();
        if (avatar) {
            print('Bitmoji loaded successfully!');
        }
    } catch (e) {
        print(`Error loading bitmoji: ${e}`);
    }
}

Step 3: Full Example

import { SessionController } from 'SpectaclesSyncKit.lspkg/Core/SessionController';
import { Bitmoji3D } from 'Bitmoji 3D.lsc/Bitmoji 3D.lsc/Bitmoji 3D';

@component
export class ConnectedLensBitmoji extends BaseScriptComponent {
  private sessionController: SessionController =
    SessionController.getInstance();
  @input
  bitmojiComponent: Bitmoji3D;

  onAwake() {
    this.sessionController.notifyOnReady(() => {
      const connectionId = this.sessionController.getLocalConnectionId();
      this.getSnapchatUserByConnectionId(connectionId);
      this.loadPlayerBitmoji(connectionId);
    });
  }

  private getSnapchatUserByConnectionId(
    connectionId: string
  ): Promise<SnapchatUser> {
    return new Promise((resolve, reject) => {
      const session = this.sessionController.getSession();
      const matchingUserInfo = session.activeUsersInfo.find(
        (userInfo) => userInfo && userInfo.connectionId === connectionId
      );

      if (matchingUserInfo) {
        session.getSnapchatUser(matchingUserInfo, resolve);
        print(
          `Found user ${matchingUserInfo.displayName} for connection ID ${connectionId}`
        );
      } else {
        reject(`User ${connectionId} not found in active users`);
      }
    });
  }

  private async loadPlayerBitmoji(connectionId: string) {
    try {
      const user = await this.getSnapchatUserByConnectionId(connectionId);
      await this.bitmojiComponent.downloadAvatarForUser(user);
      const avatar = this.bitmojiComponent.getAvatar();
      if (avatar) {
        print('Bitmoji loaded successfully!');
      }
    } catch (e) {
      print(`Error loading bitmoji: ${e}`);
    }
  }
}

Privacy & Friendship: If users are not Snapchat friends or have Bitmoji privacy restrictions enabled, a randomized Bitmoji will be loaded instead of their actual avatar.

Was this page helpful?
Yes
No