Texture image not displaying

Questions
1

So I have skinned mesh for eyes , teeths , tounge and face the texture is visible for to teeth , mouth, face but the texture image is not displaying for eyes, bottom teeth and toungs I checked the objects so I went to skinned meshes the material and then texture I found out that the images which are not displaying does not have _listener while others have

So what could be the reason for this as I can see all the skinned mesh and their texture just _listener is the difference between the object visible and not visible

2
  1. Does the model also look broken on gltf viewer ?
  2. Are you able to share the blend file?
3

The model looks fine in gltf viewer
Here is the blend file
galGadotWithActions.blend (3.2 MB)

4

Facegen 1 does not have _listener and is one of the eye which is not visible.
Facegen 3 is the face which is visible and has the _listener

image
image1228×750 155 KB

5

The above cirecle is the object of facegen 1 and below is facegen 3

imageWithMarks
imageWithMarks1228×750 167 KB

6

@mjurczyk Please check. @Mugen87

7

Yes, the model seems to work properly in gltf viewer - so the issue must unfortunately be with the code.

Which version of threejs are you using, and are you modifying the built-in materials in any way?

8

version is 0.133.0 , no i am not modifying the materials in any way

  <script src="https://cdn.jsdelivr.net/npm/three@0.133.0/build/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.133.0/examples/js/loaders/GLTFLoader.js"></script>
    <script type="module">
      // import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js";
      // import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js";

      const renderer = new THREE.WebGLRenderer();
      const camera = new THREE.PerspectiveCamera(
        50,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
      const scene = new THREE.Scene();
      let gltfmodel;
      let model;
      let light;
      let mesh;
      let meshWithShapeKeys;
      let animations;
      function init() {
        scene.background = new THREE.Color("gray");

        camera.position.set(5, 2.5, 55);
        camera.rotation.set(0, 0, 0);

        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
      }

      function setLight() {
        // Create a directional light
        var light = new THREE.DirectionalLight(0xffffff, 1.75); // color, intensity

        // Set the light's position
        light.position.set(0, 0.5, 1); // x, y, z
        scene.add(light);
      }

      function loadGLTF() {
        let Loader = new THREE.GLTFLoader();

        Loader.load("./model/galGadotWithActions.gltf", (gltf) => {
          gltfmodel = gltf;
          model = gltf.scene;
          animations = gltf.animations;

          scene.add(model);

          model.scale.set(0.1, 0.1, 0.1);

          model.position.x = 2;
          model.position.y = 5;
          model.position.z = 10;

          model.rotation.set(0.3, 0, 0);
        });
      }

      let flag = 0;

      function changeAction() {
        // Assuming you have already loaded the model and animations using GLTFLoader

        const mixer = new THREE.AnimationMixer(model);

        function update() {
          mixer.update(1);
        }

        // Play a specific animation
        if (flag == 0) {
          flag = 1;
          const clip = THREE.AnimationClip.findByName(animations, "MouthOpen");
          console.log();
          const action = mixer.clipAction(clip);
          action.play();
          update();
        } else {
          flag = 0;
          const clip = THREE.AnimationClip.findByName(
            animations,
            "MouthClosed"
          );
          const action = mixer.clipAction(clip);
          action.play();
          update();
        }

        // Play all animations
        // animations.forEach(function (clip) {
        //   mixer.clipAction(clip).play();
        //   update();
        // });
      }

      function animate() {
        setTimeout(() => {
          requestAnimationFrame(animate);
        }, 500);
        changeAction();
        renderer.render(scene, camera);
      }

      init();
      setLight();
      loadGLTF();
      animate();