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);