To start off, I am new to the ShaderMaterial and GLSL. I did read up on the GLSL Manual and looked at some examples found in my Google searches, and I'm trying my hand at this to create some texture effects in my projects. Right now I am just trying to put a texture on a surface as if I was just using MeshBasicMaterial. The code pieces look like this:

<script type="x-shader/x-vertex" id="vertexskyshader">
    varying vec2 vUv;
    void main()
    {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>

<script type="x-shader/x-fragment" id="fragskyshader">
    varying vec2 vUv;
    uniform sampler2D material;
    void main()
    {
        gl_FragColor = texture2D(material, vUv);
    }
</script>

<script type="module">
    import * as THREE.........

    for(f = 0; f < lvlfaces.length; f++)
    {
        var facemat = new THREE.ShaderMaterial({ vertexColors: THREE.VertexColors, transparent: lvlfaces[f].adjmode, depthWrite: !lvlfaces[f].adjmode, depthTest: !lvlfaces[f].adjmode,
            uniforms: { texture: { value: matTable[lvlfaces[f].mat] } },
            vertexShader: document.getElementById("vertexskyshader").textContent,
            fragmentShader: document.getElementById("fragskyshader").textContent });

The lvlfaces are being loaded from a file and are an array of objects containing information about the surface (like texture file name .mat, vertices used, uv coords, etc). matTable array where the elements are named after the texture file names contain the actual texture data (loaded from THREE.TextureLoader()). The problem I am having is that when I move around the object the textures shown change to a different texture in the matTable. Not only that but another object that uses this same loop but is assigned different textures shows the exact same textures and changes as the object I'm moving around.

animation too large for import

I have a feeling there is a conflict somewhere here but I have no idea what the fix would be.