[Be Solved]GLTF file can not load texture

Are you able to share these files as a ZIP?

Thanks for reaching out @donmccurdy

I figured out what was happening: Solution here… Help with loading gltf textures three.js

The base color of the material was black, so there was nothing to see as it was absorbing all the light. At first I was updating the material color on load, then I just updated the color so that it was white from the beginning.

This is a wonderful library / framework, but there are lots of things to take into account. I would consider myself a beginner, it’s easy to get lost in the weeds so thanks for reaching out to help.

1 Like

Hi All, I exported a gltf from Blender and made sure to include UV mapping information on export.
My three.js project will include this gltf model with custom material using a texture baked from blende r and a couple of other models , which will be using only the default shader information (exported as gltf: embedded). I have tried different approaches and I can’t succeed in applying the material with that custom baked texture to the first model. RIght now i am getting all the models in the browser correctly and no errors at all, yet my mesh is still gray (no baked texture applied)
Here is my complete code, any feedback would be very appreciated- I am new to three.js:

import ‘./style.css’
import * as THREE from ‘three’
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’
import { DRACOLoader } from ‘three/examples/jsm/loaders/DRACOLoader.js’
import { gsap } from ‘gsap’

const textureLoader = new THREE.TextureLoader()
// Draco loader
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath(‘draco/’)

// GLTF loader
const loader1= new GLTFLoader(loadingManager)
loader1.setDRACOLoader(dracoLoader)

// Debug
const debugObject = {}

// Canvas
const canvas = document.querySelector(‘canvas.webgl’)

// Scene
const scene = new THREE.Scene()

debugObject.envMapIntensity = 2.5

// Texture loader

const bakedTexture = textureLoader.load(’…/textures/small.jpg’)
const bakedMaterial = new THREE.MeshBasicMaterial({ map: bakedTexture })
bakedTexture.flipY = false
bakedTexture.encoding = THREE.sRGBEncoding

//main mesh with the custom Texture

const loader2 = new GLTFLoader(loadingManager)
var mesh2 = new THREE.Object3D();
loader2.load(’…/models/Ecuador/portal3.gltf’, function(gltf)
{ mesh2 = gltf.scene;
mesh2.name = “mesh2”;
mesh2.material = bakedMaterial;
mesh2.scale.set(2.5, 2.5, 2.5)
mesh2.rotation.y = Math.PI * 0.5

scene.add(mesh2);
mesh2.position.y = 2.5;

});

const loader3 = new GLTFLoader(loadingManager)
var mesh3 = new THREE.Object3D();
loader3.load(’…/models/Ecuador/s_2.gltf’, function(gltf)

{ mesh3 = gltf.scene;
mesh3.name = “mesh2”;
mesh3.scale.set(2.5, 2.5, 2.5)
mesh3.rotation.y = Math.PI * 0.5

scene.add(mesh3);
mesh3.position.y = 2.5;

    // updateAllMaterials()

});

const loader4 = new GLTFLoader(loadingManager)
var mesh4 = new THREE.Object3D();
loader4.load(’…/models/Ecuador/s_5gltf.gltf’, function(gltf)

{ mesh4 = gltf.scene;
mesh4.name = “mesh4”;
mesh4.scale.set(2.5, 2.5, 2.5)
mesh4.rotation.y = Math.PI * 0.5

scene.add(mesh4);
mesh4.position.y = 2.5;

    // updateAllMaterials()

});
const raycaster = new THREE.Raycaster()
/**

  • Lights
    */

const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
scene.add(ambientLight)
const directionalLight = new THREE.DirectionalLight(’#ffffff’, 3)
directionalLight.castShadow = true
directionalLight.shadow.camera.far = 15
directionalLight.shadow.mapSize.set(1024, 1024)
directionalLight.shadow.normalBias = 0.05
directionalLight.position.set(0.25, 3, - 2.25)
scene.add(directionalLight)

/**

  • Sizes
    */
    const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
    }

window.addEventListener(‘resize’, () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight

// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()

// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

})

/**

  • Camera
    */
    // Base camera
    const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 1000)
    camera.position.set(160, 190, -170)
    camera.lookAt(new THREE.Vector3(0,0,0))
    scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**

  • Renderer
    */
    const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
    })
    renderer.physicallyCorrectLights = true
    renderer.outputEncoding = THREE.sRGBEncoding
    renderer.toneMapping = THREE.ReinhardToneMapping
    renderer.toneMappingExposure = 3
    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**

  • Animate
    */
    const tick = () =>
    {
    // Update controls
    controls.update()
    // Render
    renderer.render(scene, camera)
    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
    }

tick()