threejs中gltf模型出现的问题(黑色，颜色不协调，太小)和解决方案

• 模型一片漆黑

  • 如下图
    

  • 可能原因，没有灯光，加下以下代码：

    // 4、加入灯光
    const lightness = new THREE.HemisphereLight(0xffffff, 0x444444);
    lightness.position.set(0, 20, 0);
    scene.add(lightness);
    const shadowLight = new THREE.DirectionalLight(0xffffff);
    shadowLight.position.set(0, 20, 10);
    scene.add(shadowLight);

  • 实现效果
    

• 模型导入后颜色很奇怪

  • 如下图：
    
  • 修改代码

    renderer.outputEncoding = THREE.sRGBEncoding;
    

  • 实现效果
    
  • 模型很小
    
  • 修改代码

    loader.load("./model/牛角面包.glb", function (gltf) {
        gltf.scene.scale.set(20, 20, 20);
        scene.add(gltf.scene);
    })

  • 实现的效果