I want to set the Normal texture on Fbx model , but normal is not working

Question

This is a example.

I want to have a model with a color map and a normal map.

like this , in Microsoft 3D Viewer.

And,I have a model with a normal map .

Then I use the replacement method to replace the color normal map with the original map .

<script type="module">
    import * as THREE from './build/three.module.js';
    import { OrbitControls } from './jsm/controls/OrbitControls.js';
    import Stats from './jsm/libs/stats.module.js';
    import { GUI } from './jsm/libs/lil-gui.module.min.js';
    import { OBJLoader } from './Loader/OBJLoader.js';
    import { MTLLoader } from './Loader/MTLLoader.js';
    import { FBXLoader } from './Loader/FBXLoader/FBXLoader.js';


    const scene = new THREE.Scene();

    /*--------camera--------*/
    var camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.set(0, 40, 20);
    camera.lookAt(0, 0, 0);

    /*--------renderer--------*/
    const renderer = new THREE.WebGLRenderer({
        antialias: true,
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.toneMapping = THREE.ReinhardToneMapping;

    /*--------background--------*/
    scene.background = new THREE.Color(0xffffff);

    /*--------OrbitControls--------*/
    let controls = new OrbitControls(camera, renderer.domElement);
    controls.enablePan = false;
    controls.maxPolarAngle = Math.PI / 2;
    controls.enableDamping = true;
    // controls.minDistance = 100;
    // controls.maxDistance = 1000;

    //FBX
    let FBX_name = ['group0',];
    let FBX_loader = ['loader0',];
    let FBX_url = [
        './models/Normal-map-test/01-FBX/2022-05-25.fbx',
    ];

    //Normal map
    // const material = new THREE.MeshPhongMaterial()
    const baseColorMap = new THREE.TextureLoader().load("./models/Normal-map-test/00-Texture/base-color.png");
    const normalMap = new THREE.TextureLoader().load("./models/Normal-map-test/00-Texture/normal-1.png");
    const minigunMaterial = new THREE.MeshStandardMaterial({
        map: baseColorMap,
        normalMap: normalMap
    });

    //FBX
    function FBXimport(object_name, object_loader, object_url) {
        object_loader = new FBXLoader();
        object_loader.load(object_url, function (object) {
            object_loader = new THREE.AnimationMixer(object);
            object.traverse(function (child) {
                if (child.isMesh) {
                    child.material = minigunMaterial;
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            });
            object.position.set(0, 0, 0);
            object.name = object_name;
            object.children[0].name = object_name;
            scene.add(object);
        });
        const group = scene.getObjectByName(object_name);
    }

    for (let i = 0; i < FBX_name.length; i++) {
        FBXimport(FBX_name[i], FBX_loader[i], FBX_url[i]);
    }

    //light
    const light = new THREE.HemisphereLight(0xffeeb1, 0x080820, 4);
    scene.add(light);

    const directionalLight = new THREE.DirectionalLight(0xffa95c, 5);
    directionalLight.position.set(-50, 50, 50);
    directionalLight.castShadow = true;
    directionalLight.shadow.bias = -0.0001;
    directionalLight.shadow.mapSize.width = 1024 * 4; // default
    directionalLight.shadow.mapSize.height = 1024 * 4; // default
    scene.add(directionalLight);

    const helper = new THREE.DirectionalLightHelper(directionalLight, 5);
    scene.add(helper);

    //window.onresize
    window.onresize = function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    };

    function animate() {
        controls.update();
        // stats.update();
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    };
    animate();

</script>

Apparently he doesn't work .

Am I missing something, or is there a better solution?

This is my normal map looks like

Answer 1

You are using THREE.TextureLoader().load(...), this has a second parameter callback onLoad(texture), try to set textures in this callback like this:

THREE.TextureLoader().load("your-path-to-texture-normal.png", (texture)=>{
     minigunMaterial.normalMap = texture
     mingunMaterial.needsUpdate = true
})

I suspect your normal map is not yet loaded when you are creating material, this way you will be sure that when the texture is fully loaded you will set it to the material.

EDIT: After setting the texture in callback you should also update the material, this can be done by calling material.needsUpdate=true