Applying textures to gltf

Questions
,
1

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?

2

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.

1 Like
3

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.

2 Likes
4

Hey, yes most of the glTF examples on three.js use hdr env, texture mapping. with hdr as background the glb’s takes some extra time to render. Can we do the same with three.js lighting? I tried to have 3point studio lighting setup and few other lighting combination , i could not match how its shown in sketchfab. Kindly share or suggest an lighting combination that will be best suited.

5

Some random thread I just googled said the default sketchfab environment map is the Tropical_ruins hdr available here: sketchfab-legacy-environments/default_environments at master · sketchfab/sketchfab-legacy-environments · GitHub

6

Try commenting out the following line, which was normally used with older versions of three.js library:

  renderer.outputEncoding = THREE.sRGBEncoding;

And in case if you would like to see what all those maps look like, from the link posted by @manthrax, then maybe download them to your computer, extract them and possibly use my Texture Viewer to load them locally. I would suggest you check those maps 1 by 1, so you don’t put too much pressure on the browser itself.

1 Like
7

Actually, the best choice for testing the lighting and these maps would be using the official three.js editor.

This is where you could load your model and then keep changing the overall environment by adding / removing the lights and changing their intensity / color, and possibly using the maps for background / environment.

8

If the question here is how to get the same quality out of three analytical lights as from an HDR environment texture, that isn’t possible. For PBR materials, environment maps are recommended. This doesn’t necessarily mean that the HDR needs to be the scene background, it can “just” be a light source, and there might be ways to optimize your environment map if you’re seeing performance issues.

1 Like