使用three.js导入模型，修改材质后模型变为半透明的，该怎么调整？

Question

我正在学习 three.js，从网上下载了一个汽车模型，导入模型后，渲染如下图：

我把车身材质替换成如下这段代码，效果变成了半透明的，这是为什么？应该显示为有光泽的红色的车身才对。

const bodyMaterial = new MeshPhysicalMaterial({
    color: 0xff0000,
    metalness: 1.0,
    roughness: 0.5,
    clearcoat: 1.0,
    clearcoatRoughness: 0.03,
    sheen: 0.5,
});

我在 DeepSeek 提问，回答中提到有可能原模型带有材质或纹理，和我写的材质进行了叠加，变成了现在的效果。那么我该怎么调整参数，呈现想要的效果呢？

Answer 1

让 “紫雾凌寒” 来帮你回答,本回答结合 DeepSeek

如果还有问题，请评论或点击头像私信，如果有帮助到您, 请关注、采纳、点赞

1. 关键点分析：
   - 模型导入后材质替换出现半透明效果，而预期是有光泽的红色车身，需要找出导致半透明的原因并解决。
2. 解决方案：
   - 首先，要明确在three.js中材质的设置。对于想要呈现出有光泽的红色车身效果，常用的材质如MeshStandardMaterial。
   - 假设原始模型导入后使用的是某种默认材质，当替换为新材质时出现问题。以下是一个示例代码：

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载模型
const loader = new THREE.GLTFLoader();
loader.load('car.gltf', function (gltf) {
    const car = gltf.scene;
    scene.add(car);

    // 替换车身材质为有光泽的红色材质
    const materials = car.children[0].material;
    if (materials instanceof THREE.MeshStandardMaterial) {
        materials.color.set(0xff0000);
        materials.metalness = 0.8;
        materials.roughness = 0.2;
    } else if (materials instanceof THREE.MeshPhysicalMaterial) {
        materials.color.set(0xff0000);
        materials.metalness = 0.8;
        materials.roughness = 0.2;
        materials.clearcoat = 0.5;
        materials.clearcoatRoughness = 0.2;
    }
});

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

• 在上述代码中：
  • 首先加载模型。
  • 然后找到模型的材质，如果是MeshStandardMaterial或MeshPhysicalMaterial（这两种材质常用于表现有光泽的物体），设置颜色为红色，调整metalness（金属度）和roughness（粗糙度）等参数来模拟有光泽的效果。对于MeshPhysicalMaterial还额外设置了clearcoat（清漆）和clearcoatRoughness（清漆粗糙度）等参数。
    3. 不同解决方案的优缺点：
• 使用MeshStandardMaterial：
  • 优点：简单易用，能基本模拟金属光泽效果，对于一些简单场景和需求足够。
  • 缺点：相比MeshPhysicalMaterial，效果不够真实细腻，例如在高光反射等方面表现稍逊一筹。
• 使用MeshPhysicalMaterial：
  • 优点：能提供更真实的物理材质模拟，包括更准确的高光反射、折射等效果，适用于对材质效果要求较高的场景。
  • 缺点：参数设置相对复杂，需要更多的知识来调整以达到理想效果，性能消耗可能相对较高。
    4. 总结：
• 模型材质替换后出现半透明问题，主要是因为材质设置不正确。通过使用合适的材质如MeshStandardMaterial或MeshPhysicalMaterial，并正确设置其颜色、金属度、粗糙度等参数，可以实现有光泽的红色车身效果。根据具体需求选择合适的材质，在简单场景中MeshStandardMaterial可满足基本需求，而对效果要求高时MeshPhysicalMaterial更合适。

希望以上解答对您有所帮助。如果您有任何疑问，欢迎在评论区提出。