Creating interactive 3D button with SVG elements as the faces of the cube

Is there a way for me to create a 3D cube with the each of the faces having been created with SVG. I have it working so that when I tap on the face the fill changes; however, I am struggling to make this 3D. Ideally I would like to make the SVG container a texture for my cube, but it doesn’t seem like there is a way to do this. Currently, I am trying to create a CanvasTexture but it is still only loading in 2D. Is there a way I can make it 3D while still being able to change the fill of the face(s) when I tap on it.

var button = document.querySelector(‘svg’);
var buttonFill = document.querySelector(’#buttonFill’);
var screenIsTouched = false;

var canvas = document.createElement('canvas');
var svgSize = button.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.height;
var ctx = canvas.getContext("2d");

var texture = new THREE.CanvasTexture(ctx.canvas);
texture.needsUpdate = true;
let geometry = new THREE.BoxBufferGeometry(100, 100, 100);
let material = new THREE.MeshBasicMaterial({map: texture});
mesh = new THREE.Mesh(geometry, material);

Hi June,
If I understand your question correctly, I think you can use the CSS3DObject. It allows active flat (html) content. For a 3d cube, you will probably need 6 of them, one for each side.

any help plz 3d button with css animation