Implement Meshes & Materials in WebXR with Babylon.js

👀 Stumbled here on accident? Start with the introduction!

Welcome back to the third article in our WebXR with Babylon.js series. In this chapter, we take a look at some helpful features implemented in Babylon.js, specifically related to creating objects.

ℹ️ Remember — you can always run the code associated with this article and follow along. npm start --part=3

Creating a box mesh

What is Material?

ℹ️ Materials give your meshes color and texture.

They can be displayed as a wireframe, scaled and offset across a mesh, have degrees of transparency, and be blended.

What is a Mesh?

ℹ️ In the 3D virtual world shapes are built from meshes, lots of triangular facets joined together, each facet made from three vertices.

a mesh

Babylon.js splits meshes into 4 broader categories.

• Set Shapes — which usually have names in everyday use and their forms are well known and recognized. Examples include the box, sphere, cone, and plane.

Set shapes

• Parametric Shapes — these have no everyday names are formed through data sets and tend to have irregular shapes. Examples include ribbons, extrusions, and irregular convex or concave polygons.

parametric Shapes

• Polyhedra — three-dimensional regular solids including octahedron, dodecahedron, icosahedron, and icosphere. The method of creating these is createPolyhedron along with a number for the basic shapes and an array of vertices for a wider range of shapes or createIcoSphere.

Polyhedra shapes

• Custom — those you design yourself and build from your own set of vertices connected into triangular facets as you choose.

📚 More about Meshes can be found here.

✅ For the simplicity of this series we’re going to create a simple Box with the help of the Meshbuilder and give it a color using a StandardMaterial.

Creating a Box Mesh in Babylon.js

The function createBox() illustrates how easily a 3D object can be created in Babylon.js. In this example, a simple box is created.

createBox() {
    const material = new StandardMaterial("material", this._scene);
  
    material.diffuseColor = Color3.Random();
  
    this._box = MeshBuilder.CreateBox("box", { width: 0.5, height: 0.5, depth: 0.5 }, this._scene);
    this._box.material = material;
    this._box.rotation.y = Math.PI / 4;
    this._box.position = new Vector3(0, 1.5, 1.5);
}

First, a standard material is created, calling StandardMaterial("material", this._scene). Then, the material's diffuse color is set to a random color by calling Color3.Random().

The box itself is created with MeshBuilder.CreateBox("box", { width: 0.5, height: 0.5, depth: 0.5 }, this._scene). This method creates a cube-shaped mesh with the specified dimensions.

The box is then rotated by 45 degrees Math.PI / 4 and positioned at (-1, 1.5, 1.5) in 3D space. This will place the box a little to the front left relative to us.

Adding the box to the scene

async createScene(): Promise<Scene> {
  ...
  this.createBox();
  return this._scene;
}

Finally, we have to add this.createBox() to the scene.

the final scene in this chapter

Conclusion

In wrapping up this article, we’ve touched on the fundamentals of creating 3D objects in Babylon.js within the WebXR framework. Through the simple box mesh example, we’ve seen how materials and meshes work together in 3D modeling.

The third part of this series will be about Hit Testing.