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

Questions
1

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.

2

pinging our module overlord @sebavan

1 Like
3

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.

4

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