Currently, I am attempting to apply a bitmap texture material onto a Mesh that has been created from a three.js ShapeGeometry.
The geometry itself is quite simple, resembling an octagon (although my ultimate goal is to round the edges to make it more of a rectangle).
After successfully creating and displaying the Mesh, I noticed that the bitmap texture appears as four large squares, giving off the appearance of a super low-resolution version of the actual image being loaded.
Just to provide some context, the image I am loading is a 512x512 picture of the French flag.
My main question at this point is: how can I ensure that the texture utilizes the full resolution of the loaded image? (Interestingly, this texture functions perfectly when applied as a material to a Mesh generated from a THREE.PlaneGeometry.)
Below is the code snippet I am working with:
var shape = new THREE.Shape();
shape.moveTo(-width/2 + radius, height/2);
shape.lineTo(width/2 - radius, height/2);
shape.lineTo(width/2, height/2 - radius);
shape.lineTo(width/2, -height/2 + radius);
shape.lineTo(width/2 - radius, -height/2);
shape.lineTo(-width/2 + radius, -height/2);
shape.lineTo(-width/2, -height/2 + radius);
shape.lineTo(-width/2, height/2 - radius);
shape.lineTo(-width/2 + radius, height/2);
var myGeometry = new THREE.ShapeGeometry(shape);
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
I appreciate any guidance or assistance that you can offer! Thank you!