The material of model shows wrong and Texture becomes white sometime

The model is *.glb. There are two maps to set the texture of the nodes in the model: A and B. The texture A shows texture B set in the model and the texture B shows white in the model.
The model has UV. And the model shows normally in the threejs editor.
The code is as follows:

import * as THREE from 'three'
import {GLTFLoader, OrbitControls, RoomEnvironment} from "three/addons";
export default {
  data(){
    return{
      modelURL: "static/newchair.glb"
    }
  },
  mounted() {
    this.initThree();
  },
  methods:{
    initThree(){
      const scene = new THREE.Scene();

      const canvas = document.querySelector('#three');
      const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth,window.innerHeight);
      renderer.setClearColor('#FFFFFF', 1.0);
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      renderer.toneMappingExposure = 1;
      renderer.outputEncoding = THREE.sRGBEncoding;

      let camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight,1,1000);
      camera.position.set(2,3,4);
      scene.add(camera);

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.addEventListener('change',()=>{renderer.render(scene, camera)});
      controls.minDistance = 1;
      controls.maxDistance = 3;
      controls.maxPolarAngle = Math.PI / 2;
      controls.enablePan = false;

      const filllight  = new THREE.AmbientLight(0x404040);
      scene.add(filllight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
      directionalLight.position.set( 5, 5, 1);
      scene.add(directionalLight);

      const environment = new RoomEnvironment( renderer );
      const pmremGenerator = new THREE.PMREMGenerator( renderer );
      scene.environment = pmremGenerator.fromScene( environment ).texture;

      const textureLoader = new THREE.TextureLoader();
      let texture = textureLoader.load('static/texture/texture_A.jpg'); // texture_A and B to change
      texture.encoding = THREE.sRGBEncoding;

      const loader = new GLTFLoader();
      loader.load(this.modelURL,(gltf)=>{
        // Set the nodes to change the material
        const targetNodeNames = [
          '对象015',
          '对象016',
          '对象017',
          '对象018',
          '对象019',
          '对象020',
          '对象021',
          '对象022',
          '对象023',
          '对象024'
        ];

        gltf.scene.traverse((child) => {
          if (child.isMesh && targetNodeNames.includes(child.name)){
            child.material = new THREE.MeshBasicMaterial();
            child.material.map = texture;

            child.material.side = THREE.DoubleSide

            child.material.flatShading = true
            child.material.needsUpdate = true

            renderer.render(scene, camera);

            console.log(child)
          }

          scene.add(gltf.scene);
        })
      },(xhr)=>{
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
      },(error)=>{
        console.log(error);
      });

      function animate(){

        requestAnimationFrame(animate);

        controls.update();

        renderer.render(scene, camera);
      }

      animate();
    }
  }
}

TextureA:


TextureB:

The Browser Shows:

Development evironment: Vue
So why does it happens? how to fix it?And what requirements of the texture pictures(resolution ratio,width and height,bit depth etc.)?

There aren’t any.

Which version of three.js are you using? Encoding does no longer exist on newer versions, it was replaced by color space.

(post deleted by author)