# How to put text on one side of cube only?

**URL:** <https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007>\
**Category:** Questions\
**Created:** [May 21, 2021, 11:00am UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007 "2021-05-21T11:00:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![DOEHOONLEE](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doehoonlee/32/16289_2.png) [@DOEHOONLEE](https://forum.babylonjs.com/u/DOEHOONLEE)\
**Post date:** [May 21, 2021, 11:00am UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007/1 "2021-05-21T11:00:21Z")

</div>

Hi!

 ![TEXT ON CUBE](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/a/aac021175940e89c8ec2e38792e868882c105a54.png)

I managed to write text on cube, but it appears on every side of it.

Can anybody please explain how I can write text on one side of a cube only?

link to the [playground](https://playground.babylonjs.com/#RARJIG)

```
var createScene = function () {
  // This creates a basic Babylon Scene object (non-mesh)
  const scene = new BABYLON.Scene(engine);
  
  // This creates and positions a free camera (non-mesh)
  const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
  
  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);
  
  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
  
  // Default intensity is 1. Let's dim the light a small amount
  light.intensity = 0.7;
  
  const faceColors = new Array(6);
  
  faceColors[0] = new BABYLON.Color4(1, 0, 0, 1);
  
  const dynamicTexture = new BABYLON.DynamicTexture("text", {width: 500, height: 500}, scene);
  
  const mat = new BABYLON.StandardMaterial("mat", scene);
  mat.diffuseTexture = dynamicTexture;
  dynamicTexture.drawText("AWESOME", null, null, "60px solid Arial", "blue", "white");
  
  const faceUV = new Array(6);
  
  faceUV[3] = mat;
  
  const boxOption = {
    faceColors,
    faceUV
  }
  
  // Our built-in 'sphere' shape.
  const box = BABYLON.MeshBuilder.CreateBox("box", boxOption);
  
  box.material = mat;
  
  return scene;
};

```

Thank you so much!

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 21, 2021, 12:08pm UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007/2 "2021-05-21T12:08:45Z")

</div>

You made a couple of mistakes.

You do not set faceUV[3] to the material you set it to a vector4 giving the coordinates for the uv values.

When setting the boxOption you must set the boxOption properties to their values not just list the values

Also you must set the blank faces to a zero vector4 value.

eg [https://playground.babylonjs.com/#RARJIG#2](https://playground.babylonjs.com/#RARJIG#2)

Full details and examples on how to do this and how to orientate the angle of the text on the face can be found in the docs [Map Materials to Individual Mesh Faces | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/using/texturePerBoxFace)

---

<div class="post-metadata">

**Author:** ![DOEHOONLEE](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doehoonlee/32/16289_2.png) [@DOEHOONLEE](https://forum.babylonjs.com/u/DOEHOONLEE)\
**Post date:** [May 23, 2021, 11:14am UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007/3 "2021-05-23T11:14:44Z")

</div>

This is great!! Thank you so much for your help!!

It works perfectly! This is exactly what I wanted to do 🙂

---

<div class="post-metadata">

**Author:** ![DOEHOONLEE](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doehoonlee/32/16289_2.png) [@DOEHOONLEE](https://forum.babylonjs.com/u/DOEHOONLEE)\
**Post date:** [May 24, 2021, 12:50am UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007/4 "2021-05-24T00:50:43Z")

</div>

One last question on this subject though!

From what I understood, it seems like the texture/image atlas is applied to all sides of the cube, but we are disabling unused/unwanted sides by assigning Vector4(0, 0, 0,0). Is this right?

What if I were to put text on one side and an image on some other side? So I will be using two sides of a cube with two different textures: text and image.

I found this [link](https://doc.babylonjs.com/divingDeeper/materials/using/multiMaterials) on Babylon.js Do you think I’m on the right track?

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 24, 2021, 7:37am UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007/5 "2021-05-24T07:37:19Z")

</div>

> [@DOEHOONLEE](#):
>
> I found this [link](https://doc.babylonjs.com/divingDeeper/materials/using/multiMaterials) on Babylon.js Do you think I’m on the right track?

That is one possible way but for me that is not the right track. Put the text and image on the same dynamic texture and set the faceUV values for the two faces.

> **[Map Materials to Individual Mesh Faces | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/texturePerBoxFace)**
>
> Learn how to apply different materials to different faces of a mesh.

> **[Dynamic Textures | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/dynamicTexture)**
>
> Learn all about dynamic textures in Babylon.js.

> **[Using images - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#drawing_images)**
>
> Until now we have created our own shapes and applied styles to them. One of the more exciting features of is the ability to use images. These can be used to do dynamic photo compositing or as backdrops of graphs, for sprites in games, and so forth....

---

<div class="post-metadata">

**Author:** ![DOEHOONLEE](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doehoonlee/32/16289_2.png) [@DOEHOONLEE](https://forum.babylonjs.com/u/DOEHOONLEE)\
**Post date:** [May 24, 2021, 11:45pm UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007/6 "2021-05-24T23:45:59Z")

</div>

So we have to mask unwanted sides with Vector4(0, 0, 0, 0) and use Vector4(0, 0, 1, 1) for the side that I want to show/use?

hmm is this how putting texts/images on materials work in Babylon? Isn’t this too much or unnecessary work? or am I doing it the hard way?

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 25, 2021, 8:13am UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007/7 "2021-05-25T08:13:46Z")

</div>

> [@DOEHOONLEE](#):
>
> So we have to mask unwanted sides with Vector4(0, 0, 0, 0) and use Vector4(0, 0, 1, 1) for the side that I want to show/use?

This is specifically for applying textures to individual faces on a box and a limited selection of other meshes and gives the section of the image to apply in the form Vector4(u\_bottom\_left, v\_bottom\_left, u\_top\_right, v\_top\_right) so Vector4(0, 0, 1, 1) is the whole image and since Vector4(0, 0, 0, 0) gives no area will not select part of the image.

> [@DOEHOONLEE](#):
>
> hmm is this how putting texts/images on materials work in Babylon?

Not generally. Material is applied depending on the uv values already set of the mesh

> **[More Materials | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/moreMaterials)**
>
> Learn about applying bump, opacity, tiling, and detail maps in Babylon.js.

> **[Create Custom Meshes From Scratch | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/custom/custom)**
>
> Learn how to create custom meshes in Babylon.js.

---

<div class="post-metadata">

**Author:** ![DOEHOONLEE](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doehoonlee/32/16289_2.png) [@DOEHOONLEE](https://forum.babylonjs.com/u/DOEHOONLEE)\
**Post date:** [May 26, 2021, 4:24am UTC](https://forum.babylonjs.com/t/how-to-put-text-on-one-side-of-cube-only/21007/8 "2021-05-26T04:24:01Z")

</div>

Oh~!! I see I see!

It’s all clear now. Thank you for your help!