How to put text on one side of cube only?

Questions
1

Hi!

TEXT ON CUBE
TEXT ON CUBE622×623 8.5 KB

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

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!

2

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

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

1 Like
3

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

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

4

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 on Babylon.js Do you think I’m on the right track?

5

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.

1 Like
6

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?

7

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.

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

8

Oh~!! I see I see!

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

2 Likes