Part 3: Meshes & Materials (WebXR with Babylon.js)
Tags: webxr, beginners, babylonjs, tutorial
Published: 2024-01-11 08:51:04

👀 Stumbled here on accident? Start with the [first part](https://dev.to/taikonauten/welcome-to-the-exciting-world-of-webxr-and-babylonjs-1nll)!

---

Welcome back to the next article in our WebXR series. In this article, 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzf6fksgegbnsowhmkcq.jpeg)
<figcaption>Creating a box mesh</figcaption>

---

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7clyoljt415cut14cabr.png)
<figcaption>a mesh</figcaption>

### Babylon.js splits meshes into 4 broader categories.


1. **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cccoswtlk0s2e5oo9i63.png)
<figcaption>Set Shapes</figcaption>


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


![Parametric Shapes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inhkfvx5mrenxo0clspu.png)
<figcaption>Parametric Shapes</figcaption>


3. **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra7lt5sxk8v2fm79m5r3.png)
<figcaption>Polyhedra</figcaption>

4. **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](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation).

---

✅ 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 

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

```typescript
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

```typescript
async createScene(): Promise<Scene> {
  ...
  this.createBox();

  return this._scene;
}
```
Finally, we have to add `this.createBox()` to the scene.

---

{% vimeo 901446529 %}

---

## 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 fourth part of this series will be about Hit Testing.