Currently in my threejs project, I am attempting to apply two different materials to a mesh. One material has a solid color, while the other has a canvas texture. To achieve this, I have created both materials and added them to an array, which is then assigned to the mesh's material property. Everything seems to work well, except for a strange glitchy shadow that appears at the top of the mesh, resembling a z-index overlapping issue.
In summary, here is a simplified version of the code where two materials are defined, with one using a canvas texture:
const canvasTexture = new THREE.CanvasTexture(
ctx.canvas,
THREE.UVMapping,
THREE.LinearFilter,
THREE.LinearMipMapLinearFilter,
THREE.RGBAFormat,
THREE.UnsignedByteType,
maxAnisotropy
);
const baseMaterial = new THREE.MeshLambertMaterial({
color: #ffff00
});
const designMaterial = new THREE.MeshLambertMaterial({
map: canvasTexture,
transparent: true
});
const materials = [baseMaterial, designMaterial];
myObject.material = materials;
My main concern is how to adjust the z-index of the materials within the array to avoid the glitchy shadow effect. Alternatively, I am open to any suggestions on how to resolve this issue effectively.