So I've Imported an FBX object in the editor and it looks as follows:

Perfect, that what I was expecting!

but when I make my scene and import the same object, it looks like this:

Waymore darker, but why!

even though am using direct light with the same intensity as both!

these are my editor objects:

And this is my extra simple code:

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x9A9A9A );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.z = 5;


var controls = new THREE.OrbitControls( camera, renderer.domElement );

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( directionalLight );
directionalLight.position.set(5,10,8);
var helper = new THREE.DirectionalLightHelper( directionalLight, 5 );
scene.add( helper );

var loader = new THREE.FBXLoader();

loader.load( '/assets/village/village_update.fbx', function ( object ) {
    object.traverse( function ( child ) {
        console.info( 'loaded' );
        if (child.isMesh) {
            child.receiveShadow = true;
            child.material.color.set( 0xffffff );
        }
    } );
    object.name = "village";
    console.log( 'adding it to scene' );
    scene.add( object );
});

var animate = function () {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );
};

what am I missing here?

Edit:

For anyone who want to inspect the object, you can download it from here: object texture

So I've Imported an FBX object in the editor and it looks as follows:

Perfect, that what I was expecting!

but when I make my scene and import the same object, it looks like this:

Waymore darker, but why!

even though am using direct light with the same intensity as both!

these are my editor objects:

And this is my extra simple code:

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x9A9A9A );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.z = 5;


var controls = new THREE.OrbitControls( camera, renderer.domElement );

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( directionalLight );
directionalLight.position.set(5,10,8);
var helper = new THREE.DirectionalLightHelper( directionalLight, 5 );
scene.add( helper );

var loader = new THREE.FBXLoader();

loader.load( '/assets/village/village_update.fbx', function ( object ) {
    object.traverse( function ( child ) {
        console.info( 'loaded' );
        if (child.isMesh) {
            child.receiveShadow = true;
            child.material.color.set( 0xffffff );
        }
    } );
    object.name = "village";
    console.log( 'adding it to scene' );
    scene.add( object );
});

var animate = function () {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );
};

what am I missing here?

Edit:

For anyone who want to inspect the object, you can download it from here: object texture

• javascript
• three.js

3 Answers 3

If your lights are the same in both scenes, then it looks like an issue of incorrect gamma. Try setting renderer.outputEncoding = THREE.sRGBEncoding;, assuming a recent version of three.js. In older versions this would be renderer.gammaOutput = true;.

For more details, see color management in three.js.

three.js r.112

Ok after days of searching and debugging I found this code in FBXLoader:

switch ( type ) {

                case 'Bump':
                    parameters.bumpMap = self.getTexture( textureMap, child.ID );
                    break;

                case 'Maya|TEX_ao_map':
                    parameters.aoMap = self.getTexture( textureMap, child.ID );
                    break;

                case 'DiffuseColor':
                case 'Maya|TEX_color_map':
                    parameters.map = self.getTexture( textureMap, child.ID );
                    parameters.map.encoding = THREE.sRGBEncoding;
                    break;

                case 'DisplacementColor':
                    parameters.displacementMap = self.getTexture( textureMap, child.ID );
                    break;

                case 'EmissiveColor':
                    parameters.emissiveMap = self.getTexture( textureMap, child.ID );
                    parameters.emissiveMap.encoding = THREE.sRGBEncoding;
                    break;

                case 'NormalMap':
                case 'Maya|TEX_normal_map':
                    parameters.normalMap = self.getTexture( textureMap, child.ID );
                    break;

                case 'ReflectionColor':
                    parameters.envMap = self.getTexture( textureMap, child.ID );
                    parameters.envMap.mapping = THREE.EquirectangularReflectionMapping;
                    parameters.envMap.encoding = THREE.sRGBEncoding;
                    break;

                case 'SpecularColor':
                    parameters.specularMap = self.getTexture( textureMap, child.ID );
                    parameters.specularMap.encoding = THREE.sRGBEncoding;
                    break;

                case 'TransparentColor':
                    parameters.alphaMap = self.getTexture( textureMap, child.ID );
                    parameters.transparent = true;
                    break;

                case 'AmbientColor':
                case 'ShininessExponent': // AKA glossiness map
                case 'SpecularFactor': // AKA specularLevel
                case 'VectorDisplacementColor': // NOTE: Seems to be a copy of DisplacementColor
                default:
                    console.warn( 'THREE.FBXLoader: %s map is not supported in three.js, skipping texture.', type );
                    break;

            }

Which clearly conver the encoding of the texture to THREE.sRGBEncoding if DiffuseColor. by console that out I found that the object connection state that the texture is diffused, so it is changing the encoding thus leading to dark shader.

changeing the encooding back to 3000 (normal encoding) and run material.needUpdates = true will solve the issue, or simply re export that object correctly.

For me removing renderer.toneMapping = THREE.ReinhardToneMapping; made the images much brighter.