How to put numbers to the sides of a cube and later get which number landed on top

Questions
, , ,
1

I am trying to create a dices using threejs and cannon-es. The dices are of 3 different shapes - cube, tetrahedron and octahedron. What I want to do is to add numbers to the different sides of the dice and later see which number landed on the top. How can I do both these things? I have used MeshPhongMaterial to create all the dice. Like this -

const boxGeo = new THREE.BoxGeometry(2, 2, 2);
const boxMat = new THREE.MeshPhongMaterial({
        color: 0x00ff00,
        wireframe: false,
      });
const boxMesh = new THREE.Mesh(boxGeo, boxMat);
2

This might help you.

From the Collection of examples from discourse.threejs.org

OctahedronMultipleTexture
ColorIndividualFaces
MorphBoxSphere
NumberedIcosahedron
HighlightCubeFaceOnHover
DodecahedronCanvasTexture

3

@hofk, I’m a complete beginner to threejs, none of these examples have helped me. Is there an easier or direct way to show the numbers on the sides of the cube ? I have been stuck on this for several days.

4

Make a simple threeJs project and verify you get something up and running to display a simple cube.https://www.youtube.com/watch?v=8jP4xpga6yY

Make a dice in blender and export it as a GLTF: https://www.youtube.com/watch?v=Xrzvb8HJV-8

Import the blender.gltf into your threeJS project.

That should get you off to a good start. I’ve been working on this (on and off) for about a month.

5

@morty1, Is there a way to do this completely in three.js instead of using blender?

6

I think you could make a white cube in three.js (shown in the first tutorial) and add black dots to the faces (by making circles. THREE.JS - GEOMETRIES | Three.js)

7

@morty1, I specfically want to add numbers to it instead of dots

8

You can use textures. Instead of the cube dot graphics, you use number graphics.

See BeginnerExample step 4 (from the Collection)

 // ... step 04: use a texture for the material (see also step 5 ropeMaterial)
//=================================================================================================
			// https://threejs.org/docs/index.html#api/en/loaders/TextureLoader
const texturLoader = new THREE.TextureLoader( );

...

const dicePoints = [ 'dice/1.png', 'dice/6.png', 'dice/3.png', 'dice/4.png','dice/2.png', 'dice/5.png' ];
const diceMaterials = [ ];
dicePoints.forEach( png => { diceMaterials.push( new THREE.MeshBasicMaterial( { map: texturLoader.load( png ) } ) ) } );
const diceGeometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const diceMesh = new THREE.Mesh( diceGeometry, diceMaterials ); // textures are suitable for cube
diceMesh.position.set( -0.5, -0.85, 1 ); 
diceMesh.rotation.z = -0.3;
scene.add( diceMesh );
1 Like
9

So, because so many people start using this project to make dice, they made a special mesh object for it. A mesh is made out of two things - a geometry and a skin that covers the geometry (called a material).

They create that object in this line:
const diceMesh = new THREE.Mesh( diceGeometry, diceMaterials );

The material probably has the numbers on it.
Yup. Here’s what it looks like: threejs-dice | Javascript library to create throwable dice with threejs and cannonjs

image
image1729×571 127 KB

1 Like
10

This sounds like: “I don’t know Japanese. Is there an easier or direct way to speak Japanese instead of using automatic translation?”

I’m sorry, I do not know any easier way to circumvent learning. The only ways are to learn, to pay someone who already learned it … or to find an existing library that does what you need.

If what you try to do is beyond your current skills, do not get discouraged, but inspired. My sincere advice is to split the problem into smaller problems, and resolve them one by one. For example, the problems could be:

  • how to build a Platonic solid
  • how to add a picture on a solid
  • how to add a picture on a specific side of a solid
  • how to generate a picture by code
  • how to roll the dice with Cannon-es
  • how to get the orientation of a dice at any moment
  • how to know when a dice has stopped rolling
  • how to get the side that is upwards
1 Like
11

@hofk , thank you this is of great help ! Could you please also guide me as to how I can put html elements on the sides of the dice? I have tried doing it by following this example using CSS2dRenderer but it is not working for some reason. -

const boxGeo = new THREE.BoxGeometry(2, 2, 2);
      const boxMat = new THREE.MeshPhongMaterial({
        color: 0x00ff00,
        wireframe: false,
      });
      const boxMesh = new THREE.Mesh(boxGeo, boxMat);

      var earthDiv = document.createElement("div");
      earthDiv.className = "label";
      earthDiv.textContent = "Earth";
      earthDiv.style.color = "#000000"
      earthDiv.style.fontSize = "2rem"
      earthDiv.style.marginTop = "-1em";
      var earthLabel = new CSS2DRenderer.CSS2DObject(earthDiv);
      earthLabel.position.set(0, 3, 0);
      boxMesh.add(earthLabel);
12

I haven’t looked into CSS3DRenderer much.

This example is a bit more complicated, but you may be able to simplify it step by step.
GradientsMaterialColor

See author in source code.

13

also @hofk, I am rendering the images on the cube but it is taking over the entire side of the cube and making it white, instead of just the numbers appearing on top of the original cube like this -

image

I have tried using both svgs and pngs but the result is the same for some reason. I just want the numbers to appear and not the white background with them?

14

maybe you want a transparent material on the cube?

15

You can build texture(s) procedurally, setting colors you wish for numbers and background :thinking:

изображение
изображение972×860 40.5 KB

2 Likes
16

@prisoner849, Could you please tell me how I can do that ? And also how can I make shapes just like the ones in the image you provided ?

17

THREE.CanvasTexture() will help.

Did you take a look at what @hofk provided in the post about the collection of examples? You can find there how to create icosahedon and dodecahedron.

I created some of these ones. Now I took them and re-worked a bit, got this:

изображение
изображение946×860 69.1 KB

2 Likes
18

@prisoner849, I have taken a look at those examples, but the issue I am facing with them is that the canavs texture is completely taking over the shapes and thus they are losing the features that MeshPhongMaterial provides like reacting to the light. How can I accomplish this? Could you please show me how you are doing the same with the shapes in the images you provided?

19

Start to provide an editable live code examples, that demonstrate issues, so the other forum users could see what and how you do, thus, they could provide proper help.

2 Likes
20

@prisoner849, Ill get on that. Could you please share the code to get dices like these-

image
image825×750 37.2 KB