Script: TypeScript Texture Cloud Asset Example

TypeScript Texture Cloud Asset Example picture

Type: typescript
Project: Texture Cloud Assets
Author: matas
Date Created: Jan 31, 2024, 1:03:33 PM
Last Edit Date: Feb 1, 2024, 12:58:14 PM

Project Information

In this project we demonstrate how to load Cloud image assets and create BabylonJS texture from them. Then we apply texture to material and add material on the mesh.

View Full Project

Script Code

const start = async () => {
    setupEnvironment();
    const mat = await setupTextureAndMaterial("dogs-small.jpeg");
    createGeometryAndAssignMaterial(mat);
}

async function setupTextureAndMaterial(cloudAssetFileName: string) {
    const file = await bitbybit.asset.getFile({
        fileName: cloudAssetFileName
    });
    const objectUrl = bitbybit.asset.createObjectURL({
        file
    });

    const textureOptions = new Bit.Inputs.BabylonTexture.TextureSimpleDto();
    textureOptions.url = objectUrl;
    const texture = bitbybit.babylon.texture.createSimple(textureOptions);
    const materialOptions = new Bit.Inputs.BabylonMaterial.PBRMetallicRoughnessDto();
    materialOptions.roughness = 0.9;
    materialOptions.metallic = 0.1;
    materialOptions.baseColor = "#ffffff";
    const mat = bitbybit.babylon.material.pbrMetallicRoughness.create(materialOptions);
    mat.baseTexture = texture;
    return mat;
}

function createGeometryAndAssignMaterial(mat: BABYLON.PBRMetallicRoughnessMaterial) {
    const cubeOptions = new Bit.Inputs.BabylonMeshBuilder.CreateCubeDto();
    cubeOptions.size = 10;
    const cubeMesh = bitbybit.babylon.meshBuilder.createCube(cubeOptions);

    cubeMesh.material = mat;
    bitbybit.babylon.mesh.moveUp({
        babylonMesh: cubeMesh,
        distance: 7,
    })
    const squarePlaneOptions = new Bit.Inputs.BabylonMeshBuilder.CreateSquarePlaneDto();
    squarePlaneOptions.size = 40;
    const planeSquareMesh = bitbybit.babylon.meshBuilder.createSquarePlane(squarePlaneOptions);
    bitbybit.babylon.mesh.pitch({
        babylonMesh: planeSquareMesh,
        rotate: 90
    })
    planeSquareMesh.material = mat;
}

function setupEnvironment() {
    const skyboxOptions = new Bit.Inputs.BabylonScene.SkyboxDto();
    bitbybit.babylon.scene.enableSkybox(skyboxOptions);
    const dirLightOptions = new Bit.Inputs.BabylonScene.DirectionalLightDto();
    dirLightOptions.intensity = 5;
    bitbybit.babylon.scene.drawDirectionalLight(dirLightOptions);
}

start();

Cloud Plans