Problems rendering correctly the cow

[da-campos]

I am tring to renderize correctly the eyes of the cows that should looks like this Cow - Buy Royalty Free 3D model by JoseDiaz [5a3dc6a] - Sketchfab Store but the problem is that when i am adding the texture to the material with the map is not throwing me correct rendering here i send my code

//Variables for setup
import * as THREE from 'three';
import {FBXLoader} from 'three/addons/loaders/FBXLoader.js'; 
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

let container;
let camara;
let renderer;
let scene;



function init(){
    
    container= document.querySelector('.scene');
    console.log(GLTFLoader);

    //Create scene
    scene = new THREE.Scene();

    const fov=35;
    const aspect= container.clientWidth/container.clientHeight;
    const near= 0.1;
    const far = 1000;

    //camara setup
    camara = new THREE.PerspectiveCamera(fov,aspect,near, far);
    camara.position.set(0,2,10);

    const ambient = new THREE.AmbientLight(0x404040, 2);
    scene.add(ambient);

    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(10, 25, 20);
    scene.add(light);

    //renderer setup
    renderer = new THREE.WebGLRenderer({antialias:true, alpha:true}); 
    renderer.setSize(container.clientWidth,container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.outputEncoding = THREE.sRGBEncoding; 

    container.appendChild(renderer.domElement);
    const controls = new OrbitControls(camara, renderer.domElement)
    controls.enableDamping = true
    controls.target.set(0, 1, 0)


    // Setup Textures and the FBX Files URLs
    let modelUrl1 = "static/lib/admin-3.2.0/3d_1/FBX/source/Cow.FBX";  
    let modelUrl2 = "static/lib/admin-3.2.0/3d_1/textures/Cow.tga.png";
    let modelUrl3 = "static/lib/admin-3.2.0/3d_1/textures/Eye_Brown.tga.png";
    let modelUrl4 = "static/lib/admin-3.2.0/3d_1/textures/Cow_Normals.tga.png";

    const fbxLoader = new FBXLoader()
    fbxLoader.load(modelUrl1, function(fbx) {
  
        let mesh2;
        let mesh3;
        let material2;

        //Initialize each png Textures
        let textureLoader = new THREE.TextureLoader(); 

        const texture1 = textureLoader.load( modelUrl2 );
        texture1.flipY = true;
        const texture2 = textureLoader.load( modelUrl3 );
        texture2.flipY = true;


        const normalTexture = textureLoader.load( modelUrl4 );
        normalTexture.flipY = true;

        fbx.traverse((child) => {

            
            
            if ( child.isMesh && child.geometry ) {
                // note: for a multi-material mesh, `o.material` may be an array,
                // in which case you'd need to set `.map` on each value.s
                if (child.name == "Cow_Mesh") {
                    child.material = new THREE.MeshPhongMaterial({
                    map:texture1,
                    normalMap: normalTexture
                })};
                
                if (child.name == "Eye_Left") { 
                    child.material = new THREE.MeshPhongMaterial({map:texture2})
                  
                };

                if (child.name == "Eye_Right") {
                    child.material = new THREE.MeshPhongMaterial({
                        map:texture2
                    })
                };
                console.log(child);
                child.receiveShadow = true;
                child.castShadow = true; 

                }
            
        });
        
        fbx.scale.setScalar(0.02);
        fbx.rotation.x =  -1.5;
        scene.add(fbx);
        animate();    
    });



   /*  let loader = new GLTFLoader();
    loader.load(modelUrl1,function(gltf){
        console.log(gltf)
        var model = gltf.scene;  */
         /* model.traverse ( ( o ) => {
            if ( o.isMesh ) {
            // note: for a multi-material mesh, `o.material` may be an array,
            // in which case you'd need to set `.map` on each value.
            o.material.map = texture;
            }
        } );  */
        /* scene.add( model );  */
        /* cow = gltf.scene.children[0];
        animate(); */
       /*  renderer.render(scene,camara);
    });  */

    function animate() {
        requestAnimationFrame(animate);
        controls.update(scene);
        renderer.render(scene,camara);

    }
}

init()

function onWindowResize() {
    camara.aspect = container.clientWidth/container.clientHeight;
    camara.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
}

window.addEventListener('resize', onWindowResize);

so i dont know how to fix or resize that texture eye

also if i add this code after the texture2 loader

texture2.wrapS = THREE.RepeatWrapping;
texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.set( 1.5 , 1 );

I am getting this result finally how I can’t add this Eye_Shine.tga.png in the render eye with three js and texture or materials?

[da-campos]

Okay look Now in blender i renderize the image

How i can Upload the Eye_Shine.tga.png (4 image) in Three.js in order that i can the same result as blender?

[da-campos]

Okay finally i could add the Eye_Shine.tga.png to the cow as you cna see in the figure how ever i need to increase the black pupil somehow