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 Owner 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}`);
    }
}

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