Shader Material GLSL load texture HELP

Questions
, ,
1

E Hi, sorry for my english. I have 1 project for show Sunglasses on face using webcam.
I using library threejs external and 1 file js with feature for render object. In this file js if use basicmaterial work load texture… if use shadermaterial not work. Not show texture… object only black color.
I don’t understand how to add texture to the glasses.
Any of you good, can you show me how?
someone with a good heart who teaches me to charge the texture.
I’m willing to pay for tuition.

THANKS

"use strict";

/*
  Build 3D glasses.
  spec properties: 
     * <string> envMapURL: url of the envMap
     * <string> frameMeshURL: url of the mesh used for the glasses frames
     * <string> lensesMeshURL: url of the mesh of the lenses
     * <string> occluderURL: url of the occluder
*/

const Zeta3dThreeGlassesCreator=function(spec){
  const threeGlasses = new THREE.Object3D();
  
  // envMap texture:
  const textureEquirec = new THREE.TextureLoader().load( spec.envMapURL );
  textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
  textureEquirec.magFilter = THREE.LinearFilter;
  textureEquirec.minFilter = THREE.LinearMipMapLinearFilter;

  // glasses frames:
  new THREE.BufferGeometryLoader().load(spec.frameMeshURL, function(glassesFramesGeometry){
    glassesFramesGeometry.computeVertexNormals();

    // custom material with fading at the end of the branches:
    const us = THREE.ShaderLib.standard.uniforms;
    const uniforms = {
        roughness: {value: 1},
        metalness: {value: 0},
        reflectivity: {value: 0},
        
        diffuse: {value: new THREE.Color().setHex(0xffffff)},
        uBranchFading: {value: new THREE.Vector2(-90, 60)} // first value: position (lower -> to the back), second: transition brutality
      };

    // tweak vertex shader to give the Z of the current point:
    let vertexShaderSource = "varying float vPosZ;\n" + THREE.ShaderLib.standard.vertexShader;
    vertexShaderSource = vertexShaderSource.replace('#include <fog_vertex>', 'vPosZ = position.z;');

    // tweak fragment shader to apply transparency at the end of the branches:
    let fragmentShaderSource = "uniform vec2 uBranchFading;\n varying float vPosZ;\n" + THREE.ShaderLib.standard.fragmentShader;
    const GLSLcomputeAlpha = 'gl_FragColor.a = smoothstep(uBranchFading.x - uBranchFading.y*0.9, uBranchFading.x + uBranchFading.y*0.9, vPosZ);'
    fragmentShaderSource = fragmentShaderSource.replace('#include <fog_fragment>', GLSLcomputeAlpha);

    const mat = new THREE.ShaderMaterial({
      vertexShader: vertexShaderSource,
      fragmentShader: fragmentShaderSource,
      uniforms: uniforms,
      flatShading: false,
      transparent: true,
      extensions: { // fix for https://github.com/zeta3d/zeta3dFaceFilter/issues/154
        //derivatives: true,
        //shaderTextureLOD: true
      }
    });

    
    const glassesFramesMesh = new THREE.Mesh(glassesFramesGeometry, mat);
    threeGlasses.add(glassesFramesMesh);

    window.debugMatFrames = mat; // to debug the material il the JS console
  });



  // glasses parts:
  new THREE.BufferGeometryLoader().load(spec.partsMeshURL, function(glassesPartsGeometry){
    glassesPartsGeometry.computeVertexNormals();

    // custom material with fading at the end of the branches:
    const us = THREE.ShaderLib.standard.uniforms;
    const uniforms = {
        roughness: {value: 1},
        metalness: {value: 0},
        reflectivity: {value: 0},
        
        diffuse: {value: new THREE.Color().setHex(0xffffff)},
        //uBranchFading: {value: new THREE.Vector2(-90, 60)} // first value: position (lower -> to the back), second: transition brutality
      };

    // tweak vertex shader to give the Z of the current point:
    let vertexShaderSource = "varying float vPosZ;\n" + THREE.ShaderLib.standard.vertexShader;
    vertexShaderSource = vertexShaderSource.replace('#include <fog_vertex>', 'vPosZ = position.z;');



    const mat = new THREE.MeshBasicMaterial({
      color: 0x0040FF,
      //shininess: 12,
      //specular: 0x008FFF,
      transparent: true
    });



    const glassesPartsMesh = new THREE.Mesh(glassesPartsGeometry, mat);
    threeGlasses.add(glassesPartsMesh);

    window.debugMatParts = mat; // to debug the material il the JS console
    
    });



  // glasses lens:
  new THREE.BufferGeometryLoader().load(spec.lentiMeshURL, function(glassesLentiGeometry){
    glassesLentiGeometry.computeVertexNormals();
    const mat = new THREE.MeshBasicMaterial({
      envMap: textureEquirec,
      opacity: 0.3,
      color: new THREE.Color().setHex(0xCCCCCC),
      transparent: true,
      
    });
    const glassesLentiMesh = new THREE.Mesh(glassesLentiGeometry, mat);
    threeGlasses.add(glassesLentiMesh);

    window.debugMatLens = mat; // to debug the material il the JS console
  });


  const occluderMesh = THREE.Zeta3dHelper.create_threejsOccluder(spec.occluderURL);
  
  return {
    glasses: threeGlasses,
    occluder: occluderMesh
  };
}