Skip to main content
Version: 5.x

Bitmoji 3D

You can add a 3D Bitmoji avatar representing the user as well as their friends. You can drive these avatars using body tracking, custom 3d animation that you made, or from animation services like Mixamo.

Bitmoji avatars cannot be used for commercial purposes, including Ads.

Bitmoji 3D component

For an easy, no-code approach, you may use a Bitmoji 3D component. This component allows you to easily download the 3D avatar of a Snapchat user, their friends, or their AI assistant, and add it to the scene.

Video above is using Bitmoji 3D component v 6.0 and LS 5.0.14 and newer.

Installing the component

The Bitmoji 3D custom component is available in LS Asset Library. Press install or Update and then add it to the Asset Browser panel by clicking the + button and looking up Bitmoji 3D.

Adding the Bitmoji to the scene

Drag and drop Bitmoji 3D asset to the Scene Hierarchy panel to quickly create a new scene object with components attached.

Or add Bitmoji 3D component to scene object that you want the Bitmoji to be instantiated under (version 6.0). For animated bitmoji add it to the scene object that has Animation Player on it.

The scale of the parent object is important, as it will affect how big the Bitmoji is in the scene. If you can't see your Bitmoji, try seting your parent's object scale to at 100, 100, 100.

Learn more about navigating the Scene panel in the panels guide.

Component Inputs

  • Bitmoji Owner
    • Me - avatar of current user
    • My Friend - avatar of user’s friend (if exist)Ï. Optionally can work with Friends Component
      • Friend index - friend index in the array
      • Friends Component - allows to plug in a Friends Component that allows to create a custom list of friends - for example sort them by last talked to, duration of friendship, etc. Use with My Friend owner. Read more about friends api here [link].
    • My AI - avatar of my AI
  • Mode - allows to specify how a 3D avatar is added to a scene.
    • Default - sets the parent of the Bitmoji to the current scene object. Use this mode and attach Bitmoji 3D component to scene object with Animation Player to animate your bitmoji
      • Adapt to Mixamo - Configure the Bitmoji rig to work with Mixamo generated animation
    • Body Tracking - sets the Bitmoji to be tracked to a user's body.
      • Body Index - The index of the person visible in the camera.
      • Align to Body -- Whether the Bitmoji should move with the detected user.
  • Auto Download - Whether the Bitmoji should be downloaded when the Lens starts.
  • Cast Shadow - Enable shadows (component version 6.0.2). Add Shadow Plane to Scene and enable shadows on your light source.

Each next Bitmoji asset significantly affects lens load time and overall performance. Please be mindful of this and keep the total Bitmoji 3D amount considerate.

In LS 5.0.10 and later you can inspect preview and figure out what exactly happens under the hood, where your 3D model is parented, positioned, which components are attached to the scene objects.

Getting the Bitmoji through Script

Alternatively, you can also gather Bitmoji data of a specific user, download assets and instantiate them in the scene through scripting.

const remoteMediaModule = require('LensStudio:RemoteMediaModule');
const bitmojiModule = require('LensStudio:BitmojiModule');

//@input Asset.Material material

/**
* get Bitmoji 3D resource
* @param {Bitmoji3DOptions} options
* @returns {Promise<Bitmoji3DResource>}
*/
function getBitmojiResource(options) {
return new Promise(function (resolve, reject) {
bitmojiModule.requestBitmoji3DResourceWithOptions(options, resolve);
});
}

/**
* download Bitmoji 3D assets
* @param {Bitmoji3DResource} bitmoji3DResource
* @returns {Promise<ObjectPrefab>}
*/
function download3DAsset(bitmoji3DResource) {
return new Promise(function (resolve, reject) {
remoteMediaModule.loadResourceAsGltfAsset(
bitmoji3DResource,
resolve,
reject
);
});
}

/**
* get current user
* @returns {SnapchatUser}
*/
async function getMyUser() {
return new Promise(function (resolve, reject) {
global.userContextSystem.getCurrentUser(function (user) {
resolve(user);
});
});
}

// Create the options for our current user.
const user = await getMyUser();
var options = Bitmoji3DOptions.create();
options.user = user;

// Get the Bitmoji resource, based on the options.
const bitmoji3DResource = await getBitmojiResource(options);
const gltfAsset = await download3DAsset(bitmoji3DResource);

// Instantiate the 3D model
let settings = GltfSettings.create();
settings.convertMetersToCentimeters = true;
let avatar = gltfAsset.tryInstantiateWithSetting(
script.getSceneObject(),
script.material,
settings
);

You will see a placeholder bitmoji while testing in Lens Studio for all users.

Getting Bitmoji of your friends

In the example above, notice that we use the userContextSystem in order to get the current user's Bitmoji. You can get your friends Bitmoji information through the Friends API, or Friends Custom Component as well!

Loading multiple Bitmoji avatars in one Lens

Each subsequent Bitmoji asset significantly affects lens load time and overall performance. In order to make the experience smoother, you could download avatars one by one. For example, using following code:

// disable Auto Download checkbox on Bitmoji 3D component
//@input Component[] bitmoji
async function loadBitmojiOneByOne() {
for (var i = 0; i < script.bitmoji.length; i++) {
await script.bitmoji[i].downloadAvatar();
}
}
script.createEvent('OnStartEvent').bind(loadBitmojiOneByOne);
Was this page helpful?
Yes
No

AI-Powered Search