1

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 :/

php_nub_qq
  • 15,199
  • 21
  • 74
  • 144

2 Answers2

3

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.

Community
  • 1
  • 1
gaitat
  • 12,449
  • 4
  • 52
  • 76
1

In general the THREE.Mesh constructor looks like this:

           Mesh( geometry, material )

http://threejs.org/docs/#Reference/Objects/Mesh

Use a material a material as the second parameter for the constructor to be able to use textures for your dice. I think there will be a problem because the sides of the CubeGeometry are not uniquely UV-mapped, thus if you use a texture on such a cube, every face will display the whole texture. You will either have to recalculate the UV-Mapping for each face and set the appropriate textures or I think the easier way is to use a DCC-Application to create a cube with uniquely mapped faces and then use your custom texture for the dice. I think to get started, try Blender as it is the best Open Source DCC-app around i think. Another solution would be to find a model with texture on the internet and use this for displaying a dice.

GuyGood
  • 1,377
  • 1
  • 9
  • 12
  • Hey, thanks for the advice. However can you take a look at this http://a.teall.info/dice/ it appears to use threejs :/ It's not really about finding the easier way to do it, rather than doing it because it's giving me a hard time, you know :D I can't find my way through that threejs documentation as well.. – php_nub_qq Mar 02 '14 at 22:30