Script: BabylonJS 3D Logo

// We use bitbybit to get the default engine
const engine = bitbybit.babylon.engine.getEngine();

const scene = new BABYLON.Scene(engine);

// It is important to inform bitbybit that we use non-default scene
bitbybit.babylon.scene.setAndAttachScene({ scene });

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(2, 2, -2), scene);
camera.setTarget(BABYLON.Vector3.Zero());

// We can only re-use the existing rendering canvas from default engine
const canvas = bitbybit.babylon.engine.getRenderingCanvas();

camera.attachControl(canvas, true);
camera.speed = 0.05;
camera.minZ = 0;

scene.clearColor = new BABYLON.Color4(26 / 255, 28 / 255, 31 / 255, 1);

// BabylonJS way of creating lights
const light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);
light.intensityMode = BABYLON.Light.INTENSITYMODE_ILLUMINANCE;
light.intensity = 1;

const createPointLightThroughBitByBit = async () => {
    // Bitbybit way of creating a point light, which also will create shadow generator and do some magic
    const ptLightDto = new Bit.Inputs.BabylonScene.PointLightDto();
    ptLightDto.position = [0.7, 2, -1.5];
    ptLightDto.intensity = 400;
    ptLightDto.radius = 0.1;
    bitbybit.babylon.scene.drawPointLight(ptLightDto);
}

const createBabylonJSLogo = async () => {

    const baseCube = await bitbybit.occt.shapes.solid.createBox({
        width: 1, height: 1, length: 1, center: [0, 0, 0]
    });

    const thirdSize = 0.33333334;
    const twoThirdsSize = 0.666666667;
    const halfThird = 0.1666666;

    const baseCutout = await bitbybit.occt.shapes.solid.createBox({
        width: thirdSize, height: thirdSize, length: thirdSize, center: [thirdSize, thirdSize, -thirdSize]
    });

    const diffedCube = await bitbybit.occt.booleans.difference({
        shape: baseCube,
        shapes: [baseCutout],
        keepEdges: false,
    });

    const whiteBox1 = await bitbybit.occt.shapes.solid.createBox({
        width: twoThirdsSize, height: twoThirdsSize, length: twoThirdsSize, center: [halfThird, halfThird, -halfThird]
    });

    const whiteBox2 = await bitbybit.occt.shapes.solid.createBox({
        width: thirdSize, height: twoThirdsSize, length: thirdSize, center: [0, halfThird, thirdSize]
    });

    const whiteUnion = await bitbybit.occt.booleans.union({
        shapes: [whiteBox1, whiteBox2],
        keepEdges: false,
    });

    const whiteCubeCutout = await bitbybit.occt.shapes.solid.createBox({
        width: 0.95, height: 0.95, length: 0.95, center: [0, 0, 0]
    });

    const diffedWhite = await bitbybit.occt.booleans.difference({
        shape: whiteUnion,
        shapes: [whiteCubeCutout, baseCutout],
        keepEdges: false,
    });

    const diffedRed = await bitbybit.occt.booleans.difference({
        shape: diffedCube,
        shapes: [diffedWhite],
        keepEdges: false,
    });

    const drawOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();
    drawOptions.drawEdges = false;

    const redPartMesh = await bitbybit.draw.drawAnyAsync({
        entity: diffedRed,
        options: drawOptions
    });

    const whitePartMesh = await bitbybit.draw.drawAnyAsync({
        entity: diffedWhite,
        options: drawOptions
    });

    // this is how you can access results of the drawing operation
    const surfaceMesh = whitePartMesh.getChildMeshes()[0];
    const mat = new BABYLON.PBRMetallicRoughnessMaterial("surface-material");
    mat.baseColor = new BABYLON.Color3(1, 1, 1);
    mat.metallic = 0.4;
    mat.roughness = 0.7;
    surfaceMesh.material = mat;

    // this will just group red and white meshes under one parent mesh
    const meshParent = new BABYLON.Mesh("parent-for-logo", scene);
    whitePartMesh.parent = meshParent;
    redPartMesh.parent = meshParent;

    return meshParent;
}

const createText = async () => {
    const textOptions = new Bit.Advanced.Text3D.Text3DDto();
    textOptions.text = "BabylonJS";
    textOptions.fontSize = 0.3;
    textOptions.height = 0.04;
    textOptions.origin = [1, 0, 0];
    textOptions.direction = [1, 0, 0];
    textOptions.rotation = 90;
    const text = await bitbybit.advanced.text3d.create(textOptions);
    // we center the text
    const textMoved = await bitbybit.occt.transforms.translate({ shape: text.compound, translation: [0, 0, -text.advanceWidth / 2] });

    const textDrawOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();
    textDrawOptions.edgeWidth = 0.3;
    textDrawOptions.edgeColour = "#ffffff";
    textDrawOptions.faceColour = "#ff0000";
    const drawnText = await bitbybit.draw.drawAnyAsync({
        entity: textMoved,
        options: textDrawOptions,
    });
    return drawnText;
}

const start = async () => {

    createPointLightThroughBitByBit();
    const logoMesh = await createBabylonJSLogo();
    const textMesh = await createText();

    const ground = await bitbybit.occt.shapes.face.createRectangleFace({
        width: 22,
        length: 22,
        center: [0, -0.5, 0],
        direction: [0, -1, 0],
    });

    const groundDrawOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();
    groundDrawOptions.faceOpacity = 0.4;
    bitbybit.draw.drawAnyAsync({
        entity: ground,
        options: groundDrawOptions
    });

    // this is one way to animate resulting mesh
    scene.onBeforeRenderObservable.add(s => {
        textMesh.rotate(new BABYLON.Vector3(0, 1, 0), -0.005);
    });

    // lets create a grid of instanced meshes
    const size = 10;
    const step = 2.5;
    for (let i = -size; i <= size; i += step) {
        for (let j = -size; j <= size; j += step) {
            // we need children because logo mesh consists of two childs - red and white mesh
            const children = logoMesh.getChildMeshes();
            children.forEach((c: BABYLON.Mesh) => {
                const verticeData = c.getVerticesData(BABYLON.VertexBuffer.PositionKind);
                if (verticeData && verticeData.length > 0) {
                    const inst = c.createInstance(`${i}-${j}-mesh-${c.name}`);
                    inst.position = new BABYLON.Vector3(i, -2, j);
                    scene.metadata.shadowGenerators.forEach(sh => {
                        sh.addShadowCaster(inst, true);
                    });
                }
            });
        }
    }

}
start();