I'm facing an issue where GLB models exported from Sketchfab load in three.js with correct geometry but without any textures—appearing completely white. The problem also occurs in the three.js editor as highlighted in the image below:

Below is a snapshot of my folder structure:

If you notice, the source folder contains only the .glb file and the textures reside separately:

The initial download code (thanks to @donmccurdy) is shown below:

TYPESCRIPTCopied
import { useEffect, useState, useMemo } from 'react'

import { LoaderUtils, Cache } from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { FBXLoader, TGALoader } from 'three/examples/jsm/Addons.js'
import { DRACOLoader } from 'three/examples/jsm/Addons.js'
import { KTX2Loader } from 'three/examples/jsm/Addons.js'
import { LoadingManager, REVISION } from 'three'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
import { useLoader, useThree } from '@react-three/fiber'

interface LoaderProps {
\turl: string
\trootPath: string
\tassetMap: Map<string, File>
\tfileType: string
\trootFile: File | string
}

const useModelLoader = ({
\turl,
\trootPath,
\tassetMap,
\tfileType,
\trootFile,
}: LoaderProps): any => {
\tconst { gl, scene } = useThree()
\tconst [content, setContent] = useState<any>({
\t\tscene: null,
\t\tclips: null,
\t})

\tconst MANAGER = useMemo(() => new LoadingManager(), [])
\tconst THREE_PATH = `https://unpkg.com/three@0.${REVISION}.x`

\tconst DRACO_LOADER = useMemo(
\t\t() =>
\t\t\tnew DRACOLoader(MANAGER).setDecoderPath(
\t\t\t\t`${THREE_PATH}/examples/jsm/libs/draco/gltf/`
\t\t),
\t\t[MANAGER]
\t)

\tconst KTX2_LOADER = useMemo(
\t\t() =>
\t\t\tnew KTX2Loader(MANAGER).setTranscoderPath(
\t\t\t\t`${THREE_PATH}/examples/jsm/libs/basis/`
\t\t),
\t\t[MANAGER]
\t)

\tconst traverseMaterials = (object: any, callback: (mat: any) => void) => {
\t\tobject.traverse((node: any) => {
\t\t\tif (!node.geometry) return
\t\t\tconst materials = Array.isArray(node.material)
\t\t\t\t? node.material
\t\t\t\t: [node.material]
\t\t\tmaterials.forEach(callback)
\t\t})
\t}

\t// Cleanup function for the model
\tconst cleanup = (model: any) => {
\t\tif (!model) return

\t\tscene.remove(model)

\t\tmodel.traverse((node: any) => {
\t\t\tif (node.geometry) {
\t\t\t\tnode.geometry.dispose()
\t\t\t}
\t\t})

\t\tif (model.animations) {
\t\t\tmodel.animations.forEach((animation: any) => {
\t\t\t\tif (animation.clip) {
\t\t\t\t\tanimation.clip.dispose()
\t\t\t\t}
\t\t\t})
\t\t}

\t\ttraverseMaterials(model, (material: any) => {
\t\t\tif (material.dispose) {
\t\t\t\tmaterial.dispose()
\t\t\t} 
\t\t\tfor (const key in material) {
\t\t\t\tif (
\t\t\t\t\tkey !== 'envMap' &&
\t\t\t\t\tmaterial[key] &&
\t\t\t\t\tmaterial[key].isTexture &&
\t\t\t\t\tmaterial[key].dispose
\t\t\t\t) {
\t\t\t\t\tmaterial[key].dispose()
\t\t\t\t}
\t\t\t}
\t\t})
\t}

\tuseEffect(() => {
\t\tif (!url) return

\t\tconst blobURLs: string[] = []

\t\tif (content.scene) {
\t\t\tcleanup(content.scene)
\t\t\tsetContent({ scene: null, clips: null })
\t\t}

\t\t// Manager setup for additional resources
\t\tMANAGER.setURLModifier((someUrl: string) => {
\t\t\tconst baseURL = LoaderUtils.extractUrlBase(url)
\t\t\tconst normalizedURL =
\t\t\t\trootPath +
\t\t\t\tdecodeURI(someUrl)
\t\t\t\t\t.replace(baseURL, '')
\t\t\t\t\t.replace(/^\.(?=\/)/, '')

\t\t\tif (assetMap.has(normalizedURL)) {
\t\t\t\tconst blob = assetMap.get(normalizedURL)
\t\t\t\tconst blobURL = URL.createObjectURL(blob!)
\t\t\t\tblobURLs.push(blobURL)
\t\t\t\treturn blobURL
\t\t\t}
\t\t\treturn someUrl
\t\t})

\t\tlet loader: GLTFLoader | FBXLoader | null = null
\t\tif (fileType === 'gltf/glb') {
\t\t\tloader = new GLTFLoader(MANAGER)
\t\t\t\t.setCrossOrigin('anonymous')
\t\t\t\t.setDRACOLoader(DRACO_LOADER)
\t\t\t\t.setKTX2Loader(KTX2_LOADER.detectSupport(gl))
\t\t\t\t.setMeshoptDecoder(MeshoptDecoder)
\t\t\tMANAGER.onLoad = () => {
\t\t\t\t\tconsole.log('All textures loaded successfully')
\t\t\t}

\t\t\tMANAGER.onError = url => {
\t\t\t\tconsole.error('Error loading texture:', url)
\t\t\t}
\t\t} else if (fileType === 'fbx') {
\t\t\tloader = new FBXLoader(MANAGER).setCrossOrigin('anonymous')
\t\t}

\t\tif (loader) {
\t\t\tloader.load(
\t\t\t\turl,
\t\t\t\t(object: any) => {
\t\t\t\t\tconsole.log('Loaded model:', object)
\t\t\t\t\tlet loadedScene = null
\t\t\t\t\tlet clips = null

\t\t\t\t\tif (fileType === 'gltf/glb') {
\t\t\t\t\t\tloadedScene = object.scene || object.scenes[0]
\t\t\t\t\t\tclips = object.animations || []
\t\t\t\t\t} else if (fileType === 'fbx') {
\t\t\t\t\t\tloadedScene = object
\t\t\t\t\t\tclips = object.animations || []
\t\t\t\t\t}

\t\t\t\t\tif (!loadedScene) {
\t\t\t\t\t\tconsole.error('No scene found in the model')
\t\t\t\t\t\treturn
\t\t\t\t\t}

\t\t\t\t\tsetContent({ scene: loadedScene, clips })
\t\t\t\t\tblobURLs.forEach(url => URL.revokeObjectURL(url))
\t\t\t},
\t\t\t\tundefined,
\t\t\t\terror => {
\t\t\t\tconsole.error('Error loading model:', error)
\t\t\t}\t\t
\t\t)
\t\t}

\t\treturn () => {
\t\t\tblobURLs.forEach(url => URL.revokeObjectURL(url))
\t\t\tDRACO_LOADER.dispose()
\t\t\tKTX2_LOADER.dispose()
\t\t\tuseLoader.clear(GLTFLoader, url)
\t\t\tif (content.scene) cleanup(content.scene)
\t\t\tCache.clear()
\t\t}
\t}, [url, fileType, rootPath, assetMap, rootFile])

\treturn content
}

export default useModelLoader

Here's what I've observed:

• When directly importing a GLB file (complete with its texture folder), the textures do not appear.
• Opening the same GLB file in Blender, enabling viewport shading, and re-exporting produces a model that displays textures correctly in the viewer.
• Sites like 3dviewer.net and fetchcfd.com/3d-viewer load these models with textures intact without manual re-exporting.

This leads me to believe that the original GLB files may have non-standard or incomplete material definitions (possibly non-PBR or vertex-color based) that three.js doesn't handle properly. Blender seems to automatically convert these materials to a standard PBR format during export.

My questions are:

1. What might be causing the texture data in the original GLB files to render incorrectly in three.js? Are there known issues with Sketchfab-exported GLBs regarding material settings or texture embedding?
2. How do advanced viewers (like 3dviewer.net and fetchcfd.com/3d-viewer) automatically convert or interpret these materials correctly? Do they employ specific post-processing or material conversion steps?
3. Is there a recommended approach or workaround within three.js to automatically adjust material properties after loading the GLB, so textures display correctly without needing a re-export via Blender?

Any insights, best practices, or workarounds would be greatly appreciated!

Looking forward to your help.