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

Question

我正在尝试加载具有 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();

当我检查变量时，颜色 material 已设置且正确。
这是变量浏览器：Image

谢谢！

Answer 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;

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

Why I get a black model when I load a GLTF model which have materials?

html

javascript

three.js

web

gltf