Javascript 对象在threejs编辑器中更亮

因此，我在编辑器中导入了一个FBX对象，如下所示：

太好了，这正是我所期待的

但当我制作场景并导入同一对象时，它看起来是这样的：

更黑暗，但为什么

即使我使用的直射光与两者强度相同

以下是我的编辑器对象：

这是我特别简单的代码：

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 );
};

我错过了什么

编辑：

对于想要检查对象的任何人，可以从以下位置下载：

---

如果两个场景中的灯光相同，则看起来像是伽马不正确的问题。尝试设置renderer.outpunecoding=THREE.sRGBEncoding，假设是three.js的最新版本。在旧版本中，这将是

renderer.gammaOutput=true

有关更多详细信息，请参阅

three.js r.112
好的经过几天的搜索和调试，我在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;

            }

这将纹理的编码明显转换为
3.sRGBEncoding
if
DiffuseColor
。
通过控制台，我发现对象连接状态是纹理扩散，因此它正在改变编码，从而导致暗着色器

将编码更改回3000（正常编码）并运行
material.needUpdates=true
将解决问题，或者只需正确地重新导出该对象。
对于我来说，删除
renderer.toneMapping=THREE.ReinhardToneMapping使图像更加明亮。
好的，我有一个我想要实现到平面的地面纹理，这意味着我总是需要添加
material.map.encoding=THREE.sRGBEncoding每当我对材质实现纹理时？如果纹理用于颜色数据（
.map
，
.emissive
），则是，对于其他纹理（例如
.normalMap
），请坚持使用
线性编码。理想情况下，对于PBR，您可以对所有颜色纹理执行此操作，并如上所示设置
renderer.outpunecoding=sRGBEncoding
（“线性工作流”）。另一种方法，对PBR不太好，但对其他用例很好，就是保持所有纹理和
outputEncoding
线性（“gamma工作流”）。当您混合使用这两种颜色时，因此纹理设置与渲染器设置不匹配，您将遇到与此问题类似的问题。我需要
outpunecoding=3000
来使用react fiberThat's
THREE.LinearEncoding
，并等效于上面提到的“gamma工作流”，来修复项目上的颜色。这通常不是你想要的——除非你在后处理中进行伽马校正，否则它表明其他设置不太正确。但是，如果它看起来对你的项目很好，那么我就不会太担心它了。