Texture in Threejs is brighter than the Blender render screen

Questions
, ,
1

I baked the texture in Blender and imported it along with the model, but the texture is brighter than the Blender render screen and the baked image. How can I solve this? Here is my code and image.
blender
Threejs

const canvas = document.querySelector('canvas.webgl')

const scene = new THREE.Scene()

const textureLoader = new THREE.TextureLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('draco/')
const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)

const bakedTexture = textureLoader.load('baked.jpg')
THREE.ColorManagement.legacyMode = false
bakedTexture.flipY = false
bakedTexture.encoding = THREE.SRGBColorSpace
const bakedMaterial =  new THREE.MeshBasicMaterial({ map: bakedTexture })

gltfLoader.load(
    'camera.glb',
    (gltf) =>
    {
        gltf.scene.traverse((child) =>
        {
            child.material = bakedMaterial
        })
        scene.add(gltf.scene)
    }
)

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

const camera = new THREE.PerspectiveCamera(25, sizes.width / sizes.height, 0.1, 1000)
camera.position.x = 5
camera.position.y = 5
camera.position.z = 10
scene.add(camera)

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

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

const tick = () =>
{
    controls.update()
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}

tick()
2

Set up some tonemapping, (and use MeshStandardMaterial instead of MeshBasicMaterial perhaps)…
Your setup with colorSpace all looks good.

Blender might either be doing some default tonemapping themselves, or if you’re using a light in blender, you’re seeing the Lit version of the model, whereas in threejs you’re seeing the pure diffuse texture (since you’re using BasicMaterial which does no lighting.)

So you either want to use tonemapping… or use MeshStandardMaterial and try to duplicate the light setup you have in blender, in threejs with Point/Spot/Directional lights.
or some combination of these things.

https://threejs.org/examples/webgl_tonemapping.html

3

@daedo123 maybe also try changing the following line:

bakedTexture.encoding = THREE.SRGBColorSpace

to

bakedTexture.colorSpace = THREE.SRGBColorSpace

This kind of depends on what three.js revision you are using.

1 Like