Using Your Uploaded Cloud Assets

Introduction

This tutorial builds upon the previous one. To understand this section fully, you should have already completed the Uploading Cloud Assets tutorial.

We will now show you how to access and use those uploaded cloud assets within your Rete, Blockly, and TypeScript scripts. For this guide, we assume you have already uploaded the following assets to your project's cloud storage:

BoomBox.glb
CalmCup.step

If you haven't uploaded these yet, please refer to the previous tutorial before proceeding.

Using Cloud Assets in the Rete Editor

Loading cloud assets into the Rete editor is quite straightforward. The embedded Rete script below demonstrates a complete setup. We won't provide a step-by-step guide for finding every component, as each component in Rete usually displays its category path, making it easier to locate.

Key Component for Cloud Assets: The most important component for accessing your uploaded cloud assets is:

Category Path: asset -> get -> cloud file

Important Notes for Rete:

File Name Specificity: When using the "Cloud File" component, you must provide the exact file name including its extension (e.g., BoomBox.glb, CalmCup.step). This is different from local assets where you might have used the asset title.
Working with Meshes (from .glb):
- When a .glb file is loaded, it's treated as a direct BabylonJS Mesh.
- Components in the "Babylon" category that manipulate meshes (like transformations) work by referencing and modifying the original mesh rather than creating a new clone at each step. This is done for performance.
- This means the editing experience might feel different compared to working with OCCT geometry (which involves creating new shapes from operations).
- If you need to work with a distinct copy of a mesh, you can use the babylon -> mesh -> edit -> clone component.
Different Processing for .glb vs. .step:
- Both .glb and .step assets start with the same "Cloud File" component to get the file data.
- However, a .glb file is typically interpreted and loaded directly by BabylonJS IO components (turning it into a mesh).
- A .step file, on the other hand, needs to be interpreted by an OCCT IO component first (to parse the CAD data into an OCCT shape), and then that OCCT shape is processed and meshed for display.
Scene Enhancements (Optional): The example script below also includes components to create a skybox, a directional light, enable shadows, and create a ground plane from a circle face. These are not essential for loading the assets themselves but make the scene visually richer. Feel free to ignore these parts if you're only focused on asset loading.

Click the "Run" button in the embedded editor to see the script in action. After the computation finishes (it might take a moment, especially for the STEP file), click the "Swap Canvas" button (two arrows) to enter the 3D environment and view the result.

Rete Editor Example:

Bitbybit Rete Editor - Using Cloud Assets

Using Cloud Assets in the Blockly Editor

Similar to the Rete example, the embedded Blockly script below shows a complete setup. We'll highlight the core principles rather than a detailed step-by-step block placement guide. The script also includes optional blocks for creating the skybox, light, and ground.

Key Considerations for Blockly:

Asynchronous Nature: You might notice that the Blockly script appears more involved than the Rete equivalent. This is partly because Rete often hides some of the complexities related to asynchronous operations (like file loading). Blockly, by design, exposes these more explicitly to align closely with traditional programming language concepts. This helps in understanding fundamental concepts like async/await (even if visually represented) and provides more power for writing real-time simulations or games.
"Get Cloud File" Block: You'll use a block similar to Rete's "Cloud File" component (likely found under an "Asset" or "IO" category) to fetch the cloud asset data, specifying the exact file name.
Processing .glb vs. .step: The interpretation process is similar to Rete: .glb files are typically handled by BabylonJS loading blocks, while .step files require OCCT parsing blocks before drawing.
Variables and Asynchronous Context: The example uses variables for better readability and an asynchronous context (often set up with special async function blocks) to await long-running computations like file loading and parsing. This "awaiting" allows the script to handle these operations without freezing, in a way that feels more synchronous.
Coordinate System for .glb: Remember that .glb files usually require setting the scene to use a right-handed coordinate system for correct orientation.

Blockly Editor Example:

Bitbybit Blockly Editor - Using Cloud Assets

Using Cloud Assets in the TypeScript Editor

TypeScript offers the most direct and powerful way to interact with Bitbybit.dev's features, including loading cloud assets. The embedded example below demonstrates how to load the BoomBox.glb and CalmCup.step assets.

Key Aspects of the TypeScript Approach:

Functions for Clarity: The example script uses functions to separate essential asset-loading logic from non-essential parts (like creating the ground, skybox, and light).
bitbybit Object: You'll see that the code uses the global bitbybit object to access various functions for file loading, OCCT operations, drawing, and BabylonJS interactions. This is consistent with how you access platform features in TypeScript.
Asynchronous Operations (async/await): Similar to the more explicit Blockly setup, TypeScript relies heavily on async functions and the await keyword to handle operations that take time, such as loading files from the cloud, parsing CAD data, or drawing complex geometry. This ensures the application remains responsive.
File Name Specificity: Just like in Rete and Blockly, you'll need to use the exact file names (e.g., BoomBox.glb, CalmCup.step) when calling the asset loading functions.

TypeScript Editor Example:

Bitbybit TypeScript Editor - Using Cloud Assets

const drawOptions = new Bit.Inputs.Draw.DrawOcctShapeSimpleOptions();
drawOptions.edgeWidth = 1;
drawOptions.precision = 0.001;
drawOptions.faceColour = "#ffffff";

const start = async () => {
    nonEssentials();
    loadBoomBox();
    loadCalmCup();
    createGround();
}

async function loadCalmCup() {
    const fileCalmCup = await bitbybit.asset.getFile({
        fileName: "CalmCup.step"
    });

    const calmCupShape = await bitbybit.occt.io.loadSTEPorIGES({
        assetFile: fileCalmCup,
        adjustZtoY: false,
    });

    const scaledCalmCup = await bitbybit.occt.transforms.scale({
        shape: calmCupShape,
        factor: 0.3,
    });

    const transformedCalmCup = await bitbybit.occt.transforms.translate({
        shape: scaledCalmCup,
        translation: [-2, 0, 0],
    });

    await bitbybit.draw.drawAnyAsync({
        entity: transformedCalmCup,
        options: drawOptions
    });

    // It is a good practice to keep the memory of OCCT clean after you have constructed your drawn mesh.
    // Unless, of course, you will need some of these shapes in the future.
    bitbybit.occt.deleteShapes({
        shapes: [
            calmCupShape,
            scaledCalmCup,
            transformedCalmCup
        ]
    })
}

async function loadBoomBox() {
    const fileBoomBox = await bitbybit.asset.getFile({
        fileName: "BoomBox.glb"
    });
    const boomboxMesh = await bitbybit.babylon.io.loadAssetIntoScene({
        assetFile: fileBoomBox,
        hidden: false
    });
    boomboxMesh.position.x = 2;
}

async function createGround() {
    const groundShape = await bitbybit.occt.shapes.face.createCircleFace({
        radius: 7,
        center: [0, 0, 0],
        direction: [0, 1, 0]
    });
    
    await bitbybit.draw.drawAnyAsync({
        entity: groundShape,
        options: drawOptions
    });

    bitbybit.occt.deleteShape({
        shape: groundShape
    })
}

function nonEssentials() {
    bitbybit.babylon.scene.useRightHandedSystem({
        use: true
    });
    const dirLightOptions = new Bit.Inputs.BabylonScene.DirectionalLightDto();
    dirLightOptions.direction = [-100, -100, 100];
    bitbybit.babylon.scene.drawDirectionalLight(dirLightOptions);
    const skyboxOptions = new Bit.Inputs.BabylonScene.SkyboxDto();
    skyboxOptions.skybox = Bit.Inputs.Base.skyboxEnum.clearSky;
    bitbybit.babylon.scene.enableSkybox(skyboxOptions);
}

start();

Conclusion

You've now seen how to use your uploaded cloud assets to create essentially the same 3D scene across all three of Bitbybit's main editor environments. These examples can serve as a valuable reference for loading your own unique designs and assets into the platform.

We're excited to offer three distinct editors, each with its own strengths. We believe this flexibility allows you to choose the right tool for the right task, whether you prefer visual programming or text-based coding, to bring your 3D visions to life and share them with the world.

Introduction​

Using Cloud Assets in the Rete Editor​