How to add html elements to the faces of a cube

Questions
, ,
1

I want to add html elements to the sides of a cube in a similar fashion -

const textureLoader = 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 ); 
diceMesh.position.set( -0.5, -0.85, 1 ); 
diceMesh.rotation.z = -0.3;
scene.add( diceMesh );

I think, this can be done using CSS2DRenderer, Can someone please guide me ?

2

it would be css3d if the elements are supposed to stick to the sides, not 2d, but also not possible with css3d because it doesn’t occlude. you would see all 6 sides at all times. unless the html planes cover the whole surface of the cube face. if that’s not the case there is no solution i am aware of for vanilla, you will have to implement occlusion. or, you use something that makes image snapshots of the html but that’s very hacky, and slow/expensive if it’s not just one static image.

in the react eco system there is drei/html which can easily do it: https://codesandbox.io/p/sandbox/throbbing-sea-hf7ggf?file=%2Fsrc%2FApp.js%3A36%2C52

and you might not even need html any longer with uikit uikit Documentation this can render dom-like controls in threejs. it supports all common ui controls, even inputs. here are some examples uikit Documentation you might want to use this if you can because it will be a lot faster and cleaner. browser css3d transforms have all sorts of weird glitches.

3

i saw your other post, so you want a dice game. do not use HTML in that case. just plain old text. for instance troika troika-three-text - npm

i already added physics to the demo above, you’re just one rapier function call away from knowing which face touches the ground.

4

@drcmda, I have already built most of the dice game in vanilla js using cannon-es for physics. Can the text also be added using TextGeometry mapped to the sides of the cube just like the way I have added images in the code above?

5

sure, textgeo is a mesh with sides and faces, not sure if that’s really necessary if you can use troika sdf fonts.

6

@drcmda, I am trying with textgeo but it doesnt seem to be working for some reason I can’t see the cube-

var loader = new THREE.FontLoader();
      let diceMaterials = [ ];
      loader.load( 'js/fonts/robot.json', function ( font ) {
        
        for (let i = 1; i <= 6; i++) {
          var textGeometry = new THREE.TextGeometry( i , {
            font: font,    
            size: 0.8,
            height: 0.8,
          });
          diceMaterials.push(textGeometry)
        }
      
        
      
      });   
      
      const boxGeo = new THREE.BoxGeometry(2, 2, 2);
      const boxMesh = new THREE.Mesh(boxGeo, diceMaterials);
7

‘js/fonts/robot.json’ needs to be in your /public directory

8

Could you explain, first of all to yourself, what result does this code have to produce? :thinking: