为什么我在加载有材质的 GLTF 模型时会得到黑色模型？答案

【问题标题】：Why I get a black model when I load a GLTF model which have materials?为什么我在加载有材质的 GLTF 模型时会得到黑色模型？
【发布时间】：2021-04-05 13:43:12
【问题描述】：

我正在尝试加载具有 glb 格式的 3d 模型。这是代码：

我的例外： Image
我有什么：Image

var renderer = new THREE.WebGLRenderer();

renderer.setSize(1000, 1000);
renderer.setPixelRatio(window.devicePixelRatio);
const camera = new THREE.PerspectiveCamera(75, 1000 / 1000, 0.1, 1000)
camera.position.z = 0.5;

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color('white');

const gltfLoader = new THREE.GLTFLoader();
  const url = 'hub.glb';
  gltfLoader.load(url, (gltf) => {
    const root = gltf.scene;
    scene.add(root);

  });

var render = () => {   
    requestAnimationFrame(this.render);
  
    
    renderer.render(scene, camera);
}

render();

当我检查变量时，颜色材料已设置并正确。
这是变量资源管理器：Image

谢谢！

【问题讨论】：

标签： javascript html web three.js gltf

【解决方案1】：

尝试在场景中添加一些灯光：

const ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
scene.add( ambientLight );

const dirLight = new THREE.DirectionalLight( 0xefefff, 1.5 );
dirLight.position.set( 10, 10, 10 );
scene.add( dirLight );

此外，在加载 glTF 资源时，您应该像这样配置渲染器的输出编码：

renderer.outputEncoding = THREE.sRGBEncoding;

【讨论】：

非常感谢，4小时后它现在可以工作了！！