# Problems rendering correctly the cow

**URL:** <https://discourse.threejs.org/t/problems-rendering-correctly-the-cow/47401>\
**Category:** Questions\
**Tags:** fbx, textures, materials, geometry\
**Created:** [January 29, 2023, 8:47am UTC](https://discourse.threejs.org/t/problems-rendering-correctly-the-cow/47401 "2023-01-29T08:47:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![da-campos](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/da-campos/32/32684_2.png) [@da-campos](https://discourse.threejs.org/u/da-campos)\
**Post date:** [January 29, 2023, 8:47am UTC](https://discourse.threejs.org/t/problems-rendering-correctly-the-cow/47401/1 "2023-01-29T08:47:11Z")

</div>

![Captura de pantalla_20230128_080823](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/0/307a4f171bd1f1bac6161935d9fa26f620a976d1.jpeg)  
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](https://skfb.ly/6VCIv) 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

```javascript
//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 ☹

 ![Captura de pantalla_20230128_112219](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/4/544cbe7b4f0dc2f91eb4390fd54fd714fa2bdb7b.jpeg)  
also if i add this code after the texture2 loader

```javascript
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?

 ![Captura de pantalla_20230129_043228](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/9/a9f3625d59a9ca34d0be3f40b13f2cfb6c086a32.png)

---

<div class="post-metadata">

**Author:** ![da-campos](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/da-campos/32/32684_2.png) [@da-campos](https://discourse.threejs.org/u/da-campos)\
**Post date:** [January 29, 2023, 10:06am UTC](https://discourse.threejs.org/t/problems-rendering-correctly-the-cow/47401/2 "2023-01-29T10:06:45Z")

</div>

Okay look Now in blender i renderize the image

 ![Captura de pantalla_20230129_050503](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/9/a98f50ff0c8c8c416d48035f718e21be6af34208.jpeg)  
How i can Upload the Eye\_Shine.tga.png (4 image) in Three.js in order that i can the same result as blender?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/f/4f0b541cbe42836410cd4d51a98b8344e399f71e.jpeg)

---

<div class="post-metadata">

**Author:** ![da-campos](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/da-campos/32/32684_2.png) [@da-campos](https://discourse.threejs.org/u/da-campos)\
**Post date:** [January 29, 2023, 10:43am UTC](https://discourse.threejs.org/t/problems-rendering-correctly-the-cow/47401/3 "2023-01-29T10:43:28Z")

</div>

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

 ![Captura de pantalla_20230129_054117](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/3/83bcd0b9e51aa3531df5313842344c4f947cba93.jpeg)