I have a gltf inside i have materials and i apply image texture on it but there is too much difference in real image and after applying texture

Questions
, , ,
1

image
image633×794 63.7 KB

after applying it as texture
image
image482×605 110 KB

      loadedTexture.generateMipmaps = false
      loadedTexture.colorSpace = THREE.SRGBColorSpace // Update to the correct THREE.js constant
      loadedTexture.repeat.y = -1
      loadedTexture.offset.y = 1
      loadedTexture.offset.x = 0
      // Increase sharpness
      loadedTexture.minFilter = THREE.LinearFilter
      loadedTexture.magFilter = THREE.LinearFilter
      loadedTexture.anisotropy = renderer.capabilities.getMaxAnisotropy() // Max anisotropy supported by the device

      clonedMaterial.color = new THREE.Color(1, 1, 1) // Set to white color
      clonedMaterial.emissive = new THREE.Color(1, 1, 1) // Set to black emissive to avoid color alteration
      clonedMaterial.emissiveIntensity = 0.8
      clonedMaterial.emissiveMap = loadedTexture

const dLight = new THREE.DirectionalLight(‘white’, 1.0) // Create a directional light.

dLight.position.set(20, 30, 0) // Set the light’s position.

dLight.castShadow = true // Enable shadow casting for the light.

dLight.shadow.mapSize.set(4096, 4096) // Set the shadow map size.

const d = 35 // A distance parameter for shadow camera settings.

dLight.shadow.camera.left = -d // Set the left boundary of the shadow camera’s view.

dLight.shadow.camera.right = d // Set the right boundary of the shadow camera’s view.

dLight.shadow.camera.top = d // Set the top boundary of the shadow camera’s view.

dLight.shadow.camera.bottom = -d // Set the bottom boundary of the shadow camera’s view.

const aLight = new THREE.AmbientLight(‘white’, 0.3) // Create an ambient light.

const hemiLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.8) // Create a hemisphere light.

const renderer = new THREE.WebGLRenderer({ antialias: true }, { canvas }) // Create a WebGLRenderer with antialiasing.

these are my light and color configs

2

Try a different colorspace,

Eg.,

loadedTexture.colorSpace = THREE.LinearSRGBColorSpace

The example below lets you experiment with texture colorspace and renderer tonemapping.

It also uses an environment map instead of lighting.

3

I tried all the permutation and combination possible but it didn’t worked

4

Heres another example that uses your image.

  • no lighting,
  • no environment map,
  • change loaded glb materials to use THREE.MeshBasicMaterial
  • using THREE.SRGBColorSpace
  • using no tone mapping, but THREE.NeutralToneMapping also looks close.