Access to Assets used in Docs? Also, trying to load Lottie Animation

Questions
1

One this page (https://playground.babylonjs.com/#2FDQT5#11) the environment.dds is being used. By chance, do we have access to those assets already?

I thought I could download the page and get the textures. . . but that did not work.

Also, I am trying to load Lottie assets as a texture but have yet to get to work:

Just curious if anyone else has had success with the LottieTexture.

2

I found the assets under packages/tools/playground/public/textures. . . :smile:

3

They are here: BabylonJS/Assets: A place for public domain digital assets to use.

2 Likes
4

I got the Vue demo project working. Had to read and debug other stuff, hopefully useful later.

LottieAnimatedTexture
LottieAnimatedTexture1920Ă—1032 90.4 KB

5

I do have the repo public. And I will add Lottie animations that are free. But I am in the process of checking for any errors. I have a lot to go through.

spacehenry
spacehenry1920Ă—1032 175 KB

6

Also, trying to loop through a string array filenames with a lambda but the compiler is complaining about the async aspect of it (I think):

let box = MeshBuilder.CreateBox(“box”);
let mat = new PBRMaterial(“pbr”, scene);

let idx = 0;
let filenames: string = [
“/LottieFiles/spacehenry.json”,
:
“/Aniki Hamster.json”
];

const timerId = setInterval(() => {
let lottieTexture = await LottieTexture.ParseFromUrlAsync(“lottie”, filenames[idx], scene, {
autoPlay: true,
useAnimeSize: false
})
}, 6000);

This works now:

let lottieTexture = await LottieTexture.ParseFromUrlAsync(“lottie”, filenames[6], scene, {
autoPlay: true,
useAnimeSize: false
});
mat.albedoTexture = lottieTexture
box.material = mat
mat.unlit = true

7

Getting a little closer. Appears to lag as animations progress down my list:

let idx: number = 0;
let filenames: string = [
“/LottieFiles/spacehenry.json”,
:
“/Aniki Hamster.json”
];

let mat: PBRMaterial = new PBRMaterial(“pbr”, scene);
mat.unlit = true;

let box = MeshBuilder.CreateBox(“box”);
box.material = mat;

let lottieTexture = LottieTexture.ParseFromUrlAsync(“lottie”, filenames[idx], scene, {autoPlay: true,useAnimeSize: false}).then((result: LottieTexture) => {
mat.albedoTexture = result;
});

const timerId = setInterval(() => {
idx = (idx + 1) % filenames.length;
let lottieTexture = LottieTexture.ParseFromUrlAsync(“lottie”, filenames[idx], scene, {autoPlay: true, useAnimeSize: false}).then((result: LottieTexture) => {
mat.albedoTexture = result;
});
}, 6000);

scene.createDefaultCameraOrLight(true, true, true)