Search code examples
javascriptcanvas3dthree.jscube

Threejs Dice, how to put number on face

I've just introduced myself to WebGL and Threejs in particular and as a beginning I'm trying to create a 3D dice. I've gotten it to the point where I've created the cube but I can't really figure out how to put numbers on the faces of the cube, all I can find is how to change the colors. I've looked up the examples given in the pack but I don't seem to find any examples with text on faces either. Here's my 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 );

I've logged geometry which has a property faces but it only has colors :/

Solution

  • Take a look at

    1. How to use multiple materials in a Three.js cube?
    2. Verification of using multiple textures with three.js cubes
    3. Three.js cube with different texture on each face.

    Be careful of which version of three.js you are using.