不啰嗦,我们直接开始!

前后效果对比

解决前:

解决后

解决方案

截图

核心代码

loader.load( "gltf文件路径或网络地址", function ( gltf ) {
    gltf.scene.name = '3dmodel';
    gltf.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
        child.frustumCulled = false;
        //模型阴影
        child.castShadow = true;
        //模型自发光
        child.material.emissive =  child.material.color;
        child.material.emissiveMap = child.material.map ;
    }})
    this.setContent(gltf.scene);
    scene.add( gltf.scene );
    layer.close(loading);
}, onProgress, onError);

出现原因分析

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

更深层次的问题

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

不啰嗦,文章结束,建议三连!

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐