问题:设置了环境贴图,加载模型,发现模型是黑色的。
理想加载出模型形状
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)
})
参考资料
https://blog.csdn.net/u014291990/article/details/91461333/