After creating a mesh by extruding a png image, I used the code reference from . The issue I encountered is that when using a THREE.MeshPhongMaterial with a texture map, the texture only applies to the front and back of the mesh, not the sides. The sides end up taking on the darkest color of the texture, as shown in the image below.
https://i.sstatic.net/Xumw0.png
Interestingly, when I tried the same material and texture on a cube in threejs.org/editor, the texture applied to all sides. However, in my case, the texture does not show up on the sides of the mesh.
Here is a snippet of the code I used:
var texture = THREE.ImageUtils.loadTexture('/Content/texture-green.jpg');
var bumpTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-bump.jpg');
var specularTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-specular.jpg');
var material = new THREE.MeshPhongMaterial({
map: texture,
bumpMap: bumpTexture,
bumpScale: 0.03,
specularMap: specularTexture
});
var g = new THREE.CanvasGeometry(canvas, { "height": 0.1, "solid": solid, "offset": window.thr, "steps": (steps ? Math.abs(steps) : 5) });
g.center();
mesh = new THREE.Mesh(g, material);
scene.add(mesh);
This raises the question of whether there is an issue with the geometry formation () or if there is another method to properly apply textures to the sides of the mesh.
Any insights or suggestions would be greatly appreciated. Thank you.