three.js gltf模型加载后为黑色

three.js gltf模型加载后为黑色

相关配置

• 操作系统： win10
• three.js：r97

问题描述：

出现原因分析

1. 首先确定是否是gltf格式出现原因：
   使用glft viewer 确定gltf 能否展示
2. 查看exposure是否为大于0的数，在webGLRender 中设置
3. 查看emissive和emssiveMap:
   如果使用环境光看到黑色（或者其他纯色），将emssive设置为material.color,如果有纹理，将纹理赋值给emssiMap。

 var loader = new THREE.GLTFLoader();
  loader.load( 'xxx.gltf', function ( gltf ) {
 // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //需要添加的部分
            gltf.scene.traverse( function ( child ) {
            	if ( child.isMesh ) {
                    child.material.emissive =  child.material.color;
					child.material.emissiveMap = child.material.map ;
            	}
            } );
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++    
            scene.add( gltf.scene );

        }, undefined, function ( e ) {

            console.error( e );

        } );

效果图：

更深层次的问题

渲染不理想：模型颜色比较暗淡，需要设置gamma 相关或者encoding（sRGB or liner）,这里不做过多阐述。