[SOLVED] Mesh not visible when using its ES6 builder module

Hello there, I’m trying to use BJS’s ES6 modules, but I’m struggling with mesh builders.

In this example, at lines 13 and 14, I import the modules I need to create a box:

import { Mesh } from "@babylonjs/core/Meshes/mesh";
import "@babylonjs/core/Meshes/Builders/boxBuilder";

and at line 38 I create the mesh

const box = Mesh.CreateBox('Box', { size: 3 }, scene)

For some reason, the mesh is not visible; but if you take a look at the inspector, everything is where it should be.

In this other example, I only import the @babylonjs/core/Meshes/meshBuilder module (line 12) and create the box with

const box = MeshBuilder.CreateBox("Box", { size: 3 }, scene);

on line 38.

Can someone please help me understand what I am doing wrong? When using only the Mesh and boxBuilder modules the bundle’s file size is 870kb, while using the whole meshBuilder module the file size is 955kb, I want to reduce the file size as much as possible.

pinging our module overlord @sebavan

1 Like

The size difference is totally normal cause mesh builder imports basically all the builders not just the box.

About your issue, the main difference is that there are 2 different APIs due to legacy support the former:

/**
     * Creates a box mesh. Please consider using the same method from the MeshBuilder class instead
     * @param name defines the name of the mesh to create
     * @param size sets the size (float) of each box side (default 1)
     * @param scene defines the hosting scene
     * @param updatable defines if the mesh must be flagged as updatable
     * @param sideOrientation defines the mesh side orientation (http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation)
     * @returns a new Mesh
     */
    public static CreateBox(name: string, size: number, scene: Nullable<Scene> = null, updatable?: boolean, sideOrientation?: number): Mesh

which takes size as a parameter not as an option option object.

the newer with more options:

/**
     * Creates a box mesh
     * * The parameter `size` sets the size (float) of each box side (default 1)
     * * You can set some different box dimensions by using the parameters `width`, `height` and `depth` (all by default have the same value of `size`)
     * * You can set different colors and different images to each box side by using the parameters `faceColors` (an array of 6 Color3 elements) and `faceUV` (an array of 6 Vector4 elements)
     * * Please read this tutorial : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
     * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
     * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
     * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
     * @see https://doc.babylonjs.com/how_to/set_shapes#box
     * @param name defines the name of the mesh
     * @param options defines the options used to create the mesh
     * @param scene defines the hosting scene
     * @returns the box mesh
     */
    public static CreateBox(name: string, options: { size?: number, width?: number, height?: number, depth?: number, faceUV?: Vector4[], faceColors?: Color4[], sideOrientation?: number, frontUVs?: Vector4, backUVs?: Vector4, wrap?: boolean, topBaseAt?: number, bottomBaseAt?: number , updatable?: boolean}, scene: Nullable<Scene> = null): Mesh

which takes the options as an object

The newer version is available on MeshBuilder and BoxBuilder

So you could:

import { BoxBuilder } "@babylonjs/core/Meshes/Builders/boxBuilder";

and then:

const box = BoxBuilder.CreateBox("Box", { size: 3 }, scene);

This way you benefit from extended options and granular tree shaking.

Thank you @sebavan for putting me on the right track!

Anyway, there were a couple of errors in your solution :joy:

  1. You forgot the from part
    import { BoxBuilder } from "@babylonjs/core/Meshes/Builders/boxBuilder";

  2. You forgot the new part
    const box = new BoxBuilder.CreateBox('Box', { size: 3 }, scene)

Now everything works like a charm, thanks again! :pray::pray:

2 Likes