Gltf model renders all black

Questions
1

Good morning,

I’m learning Three.js and for exercise I was trying to animate some random 3D models. I downloaded them as gltf files from sketchfab. Once loaded, some display correctly, but some other seem to have texture issues, like if they’re sort of misplaced or missing.
As I can see all of them correctly on gltfViewer, I suppose the problem is not in the models, but in how I load them.

I tried adding lights or moving the camera, but nothing seems to work. Also, I have no errors in console, so I don’t know what I’m missing.

This is the code fragment I use to load (it works for some)

const canvas = document.querySelector("canvas");
  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.outputEncoding = THREE.sRGBEncoding;

  const fov = 75;
  const aspect = 2;
  const near = 0.1;
  const far = 500;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(-130, 50, 150);

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(MODEL_CONSTS.lightBlue);

  const axesHelper = new THREE.AxesHelper(100);
  axesHelper.visible = true;
  scene.add(axesHelper);

  {
    const gltfLoader = new GLTFLoader();
    const url = `${CONSTS.resourcesRelativePath}/${CONSTS.modelsFolder}/${MODEL_CONSTS.gltfFolderName}/${MODEL_CONSTS.gltfFileName}${CONSTS.gltfFormat}`;
    gltfLoader.load(url, (gltf) => {
      const root = gltf.scene;

      scene.add(root);
    });
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;

    if (needResize) {
      renderer.setSize(width, height, false);
    }

    return needResize;
  }

  function render(time) {
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);
    requestId = requestAnimationFrame(render);
  }

  requestId = requestAnimationFrame(render);

Here are some of the results

Magigal help scene
Magigal help scene938×682 4.67 KB

Pirate island scene
Pirate island scene804×478 131 KB

Shanghai gardens scene

I logged nodes:
Pirate island nodes
Magical help nodes

Here the links to sketchfab models:


2

it looks like there’s no light. you said you tried lights, but maybe did you forget to add them to the scene? without light there is no color. i’ve seen some sketchfab models that had material.metalness ramped up, that would also create a problem.

1 Like
3

Oh gosh! I made an even more trivial mistake: I added ambientLight to the scene, but set intensity to 0! I’m embarrassed right now :man_facepalming:t3: Thanks a lot