Responding to @danyim.
Ultimately, I made the decision not to use shader codes. Instead, I opted to fully uv-unwrap my object and create my own texture using WebGL (for a simple front and back texture).
In the function below, I demonstrate how to draw an object with varying subdivisions and unwrap them.
Further down in the code, you'll find the function drawTexture where I set 'O' and 'X' textures for the front and back of the object.
I hope this explanation proves helpful to you and potentially others as well. Feel free to ask if you have any more questions.
drawObject() {
//Draw a shape resembling an object.
var length = 0.01, width = 0.297;
var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, width);
shape.lineTo(length, width);
shape.lineTo(length, 0);
shape.lineTo(0, 0);
var canvasTexture = drawTexture('x', 'o');
var textures = [
new THREE.MeshPhongMaterial({ color: 0xf9f9f9, side: THREE.BackSide, overdraw: 0.5 }),//GENERAL 0
new THREE.MeshPhongMaterial({ map: canvasTexture, side: THREE.BackSide, overdraw: 0.5 }), //FRONT 1
new THREE.MeshPhongMaterial({ map: canvasTexture, side: THREE.BackSide, overdraw: 0.5 }), //BACK 2
new THREE.MeshPhongMaterial({ color: 0x00ff00, side: THREE.BackSide, overdraw: 0.5 })
];
var material = new THREE.MultiMaterial(textures);
subDivs = parseInt(objectLength / 40); //Amount of subdivision (more provides a smoother result)
subDivs = 5;
var extrudeSettings = {
amount: 0.21,
steps: this.subDivs,
bevelEnabled: false
};
//Create a UVMap(u,v).
var uvMap = [];
for (let i = 0; i <= (subDivs) * 2; i++) {
var u = i / (subDivs * 2);
uvMap.push(new THREE.Vector2(u, 0));
uvMap.push(new THREE.Vector2(u, 1));
}
//Create the object.
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var tempI = (uvMap.length - 2) / 2;
//Map the vertices to the UVMap (only mapping top and bottom of the object (for 'x' and 'o' texture))
for (let i = 0; i < geometry.faceVertexUvs[0].length; i++) {
if (i >= 4 && i < 4 + (subDivs * 2)) {
if (isOdd(i)) {
geometry.faceVertexUvs[0][i] = [uvMap[i - 4], uvMap[i - 2], uvMap[i - 3]];
} else {
geometry.faceVertexUvs[0][i] = [uvMap[i - 4], uvMap[i - 3], uvMap[i - 2]];
}
}
else if (i >= 4 + (subDivs * 4) && i < 4 + (subDivs * 4) + (subDivs * 2)) {
if (isOdd(i)) {
geometry.faceVertexUvs[0][i] = [uvMap[tempI], uvMap[tempI + 2], uvMap[tempI + 1]];
} else {
geometry.faceVertexUvs[0][i] = [uvMap[tempI], uvMap[tempI + 1], uvMap[tempI + 2]];
}
tempI++;
}
}
//Assigning different materialIndices to different faces
for (var i = 4; i <= 13; i++) { //Front
geometry.faces[i].materialIndex = 1;
}
for (var i = 4 + (subDivs * 4); i < 4 + (subDivs * 4) + (subDivs * 2); i++) { //Back
geometry.faces[i].materialIndex = 2;
}
for (var i = 0; i <= 1; i++) {
geometry.faces[i].materialIndex = 3;
}
var plane = new THREE.Mesh(geometry, material);
return plane;
function drawTexture (msg1, msg2) {
var canvas = document.createElement('canvas'); //Create a canvas element.
var size = 128;
canvas.width = size;
canvas.height = size;
var ctx = canvas.getContext('2d');
//Draw a white background
ctx.beginPath();
ctx.rect(0, 0, size, size);
ctx.fillStyle = 'white';
ctx.fill();
//Draw the message (e.g. 'x' or 'o')
ctx.fillStyle = 'black';
ctx.font = '64px Arial';
//Determine the size of the letters.
var metrics1 = ctx.measureText(msg1);
var textWidth1 = metrics1.width;
var textHeight = parseInt(ctx.font);
var metrics2 = ctx.measureText(msg2);
var textWidth2 = metrics2.width;
ctx.fillText(msg1, size / 4 - textWidth1 / 2, size / 2 + (textHeight / 4));
ctx.fillText(msg2, (3 * size / 4) - textWidth2 / 2, size / 2 + (textHeight / 4));
//Store the canvas in a THREE.js texture.
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture; //Return Three.Texture