Applying textures to gltf

I downloaded a gltf file from sketchfab.
You can download it for free.
All I got on my page is just plain gray circle object, which is textureless.

    <script type="module">
      import * as THREE from 'three';
      import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
  
      let scene = new THREE.Scene();
      let renderer = new THREE.WebGLRenderer({
          canvas : document.querySelector('#canvas'),
          antialias: true
      });
      renderer.outputEncoding = THREE.sRGBEncoding;
  
      let camera = new THREE.PerspectiveCamera(30,1);
      camera.position.set(0,1.5,10);

      scene.background = new THREE.Color('black');
      let light = new THREE.DirectionalLight(0xffff00, 5);
      scene.add(light);

      const modelLoader = new GLTFLoader();

      modelLoader.load('./src/assets/visual/3D/pearl3.gltf', (gltf) => {
          scene.add(gltf.scene);
      });
  </script>

How can I apply jpg textures?

If the GLTF file doesn’t include texture. You have to load your own, then add it to the default GLTFloader material, or completely replace the material itself.

I posted some code sample/explanation like this one: (to be used at your modelLoader.load function)

To load the texture, you can follow three.js offical docs about it.

You’ll need better lighting to make any PBR material look similar to how it looks in Sketchfab. A single DirectionalLight is not enough for pearl-like reflections; you need something that can be reflected. Most of the glTF examples on the three.js site use an environment map loaded from .hdr, .exr, or THREE.RoomEnvironment for this reason.