gltf模型加载,显示为黑色

问题:设置了环境贴图,加载模型,发现模型是黑色的。
理想加载出模型形状
image.png
实际加载出模型形状
image.png

我们可以通过如下步骤去检测

1.使用Three.js提供的 editor打开模型文件
image.png
2. 使用editor加载模型文件
image.png
3. 查看模型有差异颜色的材料,发现emissive是黑色,map无。
image.png
4. 使用3D软件或windows电脑自带的 画图3D对模型文件进行格式重新导出,可以直接导出,不做修改。
image.png

image.png
5. 使用EDITOR打开新的模型
image.png
6. 场景增加环境光
image.png
7. 设置环境光颜色
image.png
8. 这样的模型显示就是我们需要的颜色。新模型材料的属性与老模型材料的属性存在差异。
image.png
9. 模型在EDITOR中能正确显示了,但在代码中加载模型还需要如下设置
gltfLoader.load("./model/cityScene3.glb", (glb: any) => {
    glb.scene.traverse(function (child: any) {
        if (child.isMesh) {
            // 写法1
            child.material.emissive =  child.material.color;
            child.material.emissiveMap = child.material.map ;
           // 写法2
         // child.material = new THREE.MeshStandardMaterial({
            //     emissive: child.material.color,
            //     emissiveMap: child.material.map,
            // });
        }
    });
    scene.add(glb.scene)
})

emissive和emissiveMap的区别参考

参考资料
https://blog.csdn.net/u014291990/article/details/91461333/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容