Recently, I started learning WebGL and specifically Threejs. As a beginner project, I decided to create a 3D dice. I managed to create the cube but now I'm struggling to add numbers to the faces of the cube. The resources I've found only show how to change colors, not add text. I looked through the examples provided in the package but couldn't find any with text on the faces. Below is my current code:
container = document.body;
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry(200,200,200);
cube = new THREE.Mesh(geometry);
scene.add( cube )
cube.rotation.x = 0.01;
renderer.render( scene, camera );
When I inspected geometry, I noticed it has a property called faces but it only contains color information.