Let's take a look at how to spice up this scene a bit, so that it has some color and user interaction (hover and click).

Here's the standard imperative way to add color to a box. There are many materials and different color properties (diffuse, emissive, etc)

import { Color3, MeshBuilder, StandardMaterial } from '@babylonjs/core'

const box = MeshBuilder.CreateBox('box', { size: 2 }, scene)
const material = new StandardMaterial('material', scene)
material.diffuseColor = Color3.Yellow()
material.specularColor = Color3.Black()
box.material = material

<box name="box" size={2}>
  <standardMaterial
    name="material"
    diffuseColor={Color3.Yellow()}
    specularColor={Color3.Black()}
  />
</box>

If you have followed the other guides the declarative should be obvious. The main thing to note is that the material is automatically assigned. When the material is created is walks down the tree graph and assigns itself to the first mesh it finds. You can also put Texture objects as children of the <standardMaterial .. /> there is more on that later.

Adding interactions

We'll do that with hooks for hover (useHover) and click (useClick).

Basically both of those hooks are pretty self explanatory in the sense that they have a callback methods:

1. useClick: has a single callback for when a click occurs
2. useHover: callbacks for for hovering over and out events.

If you don't pass in a Ref then one will be created for you (and you can use that in the object). The easiest way though is to use a useRef and pass it through to each hook - check the code below demonstrates that way to flow the ref through.