Loading GLB models with texture. Can't see the texture in the scene!

Questions
, , , ,
1

I’m trying to load a 3d model from 3dsMax to three.js. Within 3dsMax I added a texture to the object, but I can’t see the texture in the scene

this is what I see in the scene:

clothes
clothes729×662 23.8 KB

This is what I see in 3dsMax:

clothes2
clothes2643×602 40.8 KB

Here is the relevant code:

    scene = new THREE.Scene();
          camera = new THREE.PerspectiveCamera(
          35,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
    );
    camera.position.z = 8;
    camera.position.y = 1;

    
    
    // Specify a canvas which is already created in the HTML.
    
    const canvas = document.getElementById(this.canvasId);
    renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true,
    });
    renderer.shadowMap.enabled = true
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // Lightning
    //ambient light
    ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    //Directional Light
    directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.castShadow = true;
    directionalLight.position.set(-20, 20, 32);
    directionalLight.shadow.normalBias = 0.03
    scene.add(directionalLight);

    // Importing GLTF model
    let gltf = new GLTFLoader()
    gltf.load("../src/folded_clothes4.glb", (glb) => {
        glb.scene.traverse ( (child) => {
            if ( child.isMesh )
            {
                child.castShadow = true;
                child.receiveShadow = true;
            }
          });
        let loader = glb.scene;
        loader.position.y = -0.17
        loader.position.z = 0
        loader.position.x = 0
        scene.add(loader)
        })

Here is the material setting in 3dsMax:

materialSetting
materialSetting477×795 39.1 KB

2

Can you please check if your glTF asset is correctly rendered with the following viewer? https://gltf-viewer.donmccurdy.com/

If not, can you give this one a try? https://sandbox.babylonjs.com/

3

When you created your GLTF file, did you choose to embed the texture in the file, or is it linked as a separate file? And if the latter, is the file path relative or absolute?

4

The problem was with the material setting. I mistakenly selected bitmap lookup instead of bitmap when adding the texture in 3dsMax, so when I fixed it, the problem was solved.

5

I have two glb models

1. avocado model (avocado.glb)
2. ring model (medieval_ring.glb)

My threejs code is working with avocado.glb.

But, I am not able to see the medieval_ring.glb with textures in threejs code. Even though I am able to see the medieval_ring.glb file with texture in gltf-viewer (https://gltf-viewer.donmccurdy.com) and babylonjs (https://sandbox.babylonjs.com)

threejs code → index.php
css → style.css
screen shot → ring-without-texture.jpg

In the source (index.php) one can toggle between the two models by commenting/uncommenting line 52 and line 53 (or search for “const modelUrl” declaration in index.php file)

All of the files are available at - threejs - Google Drive

Thank You for reading